janwirth/redefine-custom-elements.html Secret

## redefine-custom-elements.html
<!-- This is just a POC which defines custom elements in an iframe and then transfers it back.-->

<html>
  <head> </head>
  <body>
    <script>
      const defineEl = content => {
          const iframe = document.createElement("iframe");
          iframe.src = "/empty.html";

          document.body.appendChild(iframe);
          iframe.addEventListener("load", () => {
            class PopUpInfo extends iframe.contentWindow.HTMLElement {
              constructor() {
                // Always call super first in constructor
                super();

                // write element functionality in here

              }
              connectedCallback () {
                this.innerHTML = content
              }
            }
            console.log("loaded");
            iframe.contentWindow.document.innerHTML = "";
            iframe.contentWindow.customElements.define("custom-el", PopUpInfo);
            const instance = iframe.contentWindow.document.createElement("custom-el")
            iframe.contentWindow.document.body.appendChild(instance)
            document.body.appendChild(instance)
            document.body.removeChild(iframe)
          })
      }
      defineEl("ABC")
      defineEl("DEF")
    </script>
  </body>
</html>
	<!-- This is just a POC which defines custom elements in an iframe and then transfers it back.-->

	<html>
	<head> </head>
	<body>
	<script>
	const defineEl = content => {
	const iframe = document.createElement("iframe");
	iframe.src = "/empty.html";

	document.body.appendChild(iframe);
	iframe.addEventListener("load", () => {
	class PopUpInfo extends iframe.contentWindow.HTMLElement {
	constructor() {
	// Always call super first in constructor
	super();

	// write element functionality in here

	}
	connectedCallback () {
	this.innerHTML = content
	}
	}
	console.log("loaded");
	iframe.contentWindow.document.innerHTML = "";
	iframe.contentWindow.customElements.define("custom-el", PopUpInfo);
	const instance = iframe.contentWindow.document.createElement("custom-el")
	iframe.contentWindow.document.body.appendChild(instance)
	document.body.appendChild(instance)
	document.body.removeChild(iframe)
	})
	}
	defineEl("ABC")
	defineEl("DEF")
	</script>
	</body>
	</html>