Created
February 17, 2025 16:56
-
-
Save JLarky/5e65b9c11bcc9f7ffb530dc55d7c8cfa to your computer and use it in GitHub Desktop.
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head is="my-head"> | |
| <script> | |
| customElements.define( | |
| "my-head", | |
| class extends HTMLHeadElement { | |
| connectedCallback() { | |
| this.setAttribute("live", "true"); | |
| this.appendChild(document.createElement("title")).textContent = | |
| "Set title from WC"; | |
| // can't use SD though, this will fail: this.attachShadow({ mode: "open" }); | |
| } | |
| }, | |
| { extends: "head" } | |
| ); | |
| customElements.define( | |
| "my-link", | |
| class extends HTMLLinkElement { | |
| connectedCallback() { | |
| this.setAttribute("live", "true"); | |
| // can't block on this CSS | |
| this.setAttribute( | |
| "href", | |
| "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" | |
| ); | |
| } | |
| }, | |
| { extends: "link" } | |
| ); | |
| customElements.define( | |
| "my-wc", | |
| class extends HTMLElement { | |
| connectedCallback() { | |
| // can't be used to add more tags to the head | |
| // this is probably what got me thinking that WCs can't be used in the head --- https://enhance.dev/docs/conventions/head#content | |
| console.log( | |
| "This component can't be inside the head tag it will be moved to body", | |
| this | |
| ); | |
| } | |
| } | |
| ); | |
| </script> | |
| <meta charset="utf-8" is="cant-extend" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link is="my-link" rel="stylesheet" /> | |
| <my-wc></my-wc> | |
| </head> | |
| <body></body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment