<!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>