<h2>img Element</h2>
<img is="light-box" src="https://assets.codepen.io/1804713/ninja2.svg" data-lbsrc="https://assets.codepen.io/1804713/ninja2.svg" alt="Silent but Undeadly Zombie Ninja">
<hr>
<h2>lightbox-polyfill Element</h2>
<lightbox-polyfill src="https://assets.codepen.io/1804713/cowboy.svg" data-lbsrc="https://assets.codepen.io/1804713/cowboy.svg" alt="Silent but Undeadly Zombie Cowboy"></lightbox-polyfill>

img,
lightbox-polyfill {
  width: 200px;
  height: auto;
  display: block;
  position: relative;
}

let customBuiltInElementsSupported = false;

customElements.define(
  "light-box",
  class LightBox extends HTMLImageElement {
    constructor() {
      super();
      customBuiltInElementsSupported = true;
      let lb = document.createElement("div");
      lb.style.display = "none";
      lb.style.position = "absolute";
      lb.style.height = "102vh";
      lb.style.width = "102vw";
      lb.style.top = "-1vh";
      lb.style.left = "-1vw";
      lb.style.background =
        "rgba(0,0,0, 0.7) url(" + this.dataset.lbsrc + ") no-repeat center";
      lb.style.backgroundSize = "contain";
      lb.addEventListener("click", function (evt) {
        this.style.display = "none";
      });
      this.parentNode.insertBefore(lb, this);
      this.addEventListener("click", function (evt) {
        lb.style.display = "block";
      });
    }
  },
  { extends: "img" }
);
customElements.define(
  "lightbox-polyfill",
  class LightBoxPoly extends HTMLElement {
    constructor() {
      super();

      let lb = document.createElement("div");
      lb.style.display = "none";
      lb.style.position = "absolute";
      lb.style.height = "100vh";
      lb.style.width = "100vw";
      lb.style.top = 0;
      lb.style.left = 0;
      lb.style.background =
        "rgba(0,0,0, 0.7) url(" + this.dataset.lbsrc + ") no-repeat center";
      lb.style.backgroundSize = "contain";

      const shadowRoot = this.attachShadow({ mode: "open" });

      let lbpimg = document.createElement("img");

      lbpimg.setAttribute("src", this.getAttribute("src"));
      lbpimg.setAttribute("alt", this.getAttribute("alt"));

      shadowRoot.appendChild(lb);
      shadowRoot.appendChild(lbpimg);
      lb.addEventListener("click", function (evt) {
        this.style.display = "none";
      });

      lbpimg.addEventListener("click", function (evt) {
        lb.style.display = "block";
      });
    }
  }
);

if (!customBuiltInElementsSupported) {
  let lbimgs = document.querySelectorAll('img[is="light-box"]');
  for (let i = 0; i < lbimgs.length; i++) {
    let replacement = document.createElement("lightbox-polyfill");
    replacement.shadowRoot
      .querySelector("img")
      .setAttribute("src", lbimgs[i].getAttribute("src"));
    replacement.shadowRoot
      .querySelector("img")
      .setAttribute("data-lbsrc", lbimgs[i].dataset.lbsrc);
    replacement.shadowRoot.querySelector("div").style.background =
      "rgba(0,0,0, 0.7) url(" + lbimgs[i].dataset.lbsrc + ") no-repeat center";
    replacement.shadowRoot
      .querySelector("img")
      .setAttribute("alt", lbimgs[i].getAttribute("alt"));
    lbimgs[i].parentNode.insertBefore(replacement, lbimgs[i]);
    lbimgs[i].remove();
  }
}