-
-
Save janwirth/60797dd30c0b472dad5761e53423790a to your computer and use it in GitHub Desktop.
Redefine custom elements in HTML
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment