img {
  width: 200px;
  height: auto;
}

customElements.define(
  "light-box",
  class LightBox extends HTMLImageElement {
    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";
      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" }
);