Skip to content

Instantly share code, notes, and snippets.

@JLarky

JLarky/index.html

Created February 17, 2025 16:56
Show Gist options
  • Save JLarky/5e65b9c11bcc9f7ffb530dc55d7c8cfa to your computer and use it in GitHub Desktop.
Save JLarky/5e65b9c11bcc9f7ffb530dc55d7c8cfa to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. JLarky created this gist Feb 17, 2025.
    52 changes: 52 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    <!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>