t8g · January 8, 2020 14:15
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script>
      class CleImage extends HTMLElement {
        constructor() {
          super();
          this.shadow = this.attachShadow({ mode: "open" });
          this.wrapper = document.createElement("div");
          this.img = document.createElement("img");

          const style = document.createElement("style");

          style.textContent = `
            div {
                position: relative;
            }
            span {
                position: absolute;
                background: #ddd;
                opacity: .2;
                border: 2px solid red;
                border-radius: 3px;
                display: block;
            }
          `;

          this.wrapper.appendChild(this.img);
          this.shadow.appendChild(style);
          this.shadow.appendChild(this.wrapper);
        }

        connectedCallback() {
          this.img.src = this.getAttribute("src");
          const [x, y, w, h] = JSON.parse(this.getAttribute("calc"));
          this.img.addEventListener("load", () => {
            const span = document.createElement("span");
            span.style.left = `${this.img.offsetWidth * x * 0.01}px`;
            span.style.top = `${this.img.offsetHeight * y * 0.01}px`;
            span.style.width = `${this.img.offsetWidth * w * 0.01}px`;
            span.style.height = `${this.img.offsetHeight * h * 0.01}px`;
            this.wrapper.appendChild(span);

            span.style.transform = "rotate(45deg)";
            this.img.style.transform = "rotate(45deg)";
            this.wrapper.transform = "rotate(45deg)";
          });
        }
      }

      customElements.define("cle-img", CleImage);
    </script>
  </head>
  <body>
    <cle-img src="https://picsum.photos/1000/700" calc="[40,20,10,5]"></cle-img>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script>
	class CleImage extends HTMLElement {
	constructor() {
	super();
	this.shadow = this.attachShadow({ mode: "open" });
	this.wrapper = document.createElement("div");
	this.img = document.createElement("img");

	const style = document.createElement("style");

	style.textContent = `
	div {
	position: relative;
	}
	span {
	position: absolute;
	background: #ddd;
	opacity: .2;
	border: 2px solid red;
	border-radius: 3px;
	display: block;
	}
	`;

	this.wrapper.appendChild(this.img);
	this.shadow.appendChild(style);
	this.shadow.appendChild(this.wrapper);
	}

	connectedCallback() {
	this.img.src = this.getAttribute("src");
	const [x, y, w, h] = JSON.parse(this.getAttribute("calc"));
	this.img.addEventListener("load", () => {
	const span = document.createElement("span");
	span.style.left = `${this.img.offsetWidth * x * 0.01}px`;
	span.style.top = `${this.img.offsetHeight * y * 0.01}px`;
	span.style.width = `${this.img.offsetWidth * w * 0.01}px`;
	span.style.height = `${this.img.offsetHeight * h * 0.01}px`;
	this.wrapper.appendChild(span);

	span.style.transform = "rotate(45deg)";
	this.img.style.transform = "rotate(45deg)";
	this.wrapper.transform = "rotate(45deg)";
	});
	}
	}

	customElements.define("cle-img", CleImage);
	</script>
	</head>
	<body>
	<cle-img src="https://picsum.photos/1000/700" calc="[40,20,10,5]"></cle-img>
	</body>
	</html>