The HTML spec only allows metadata content within the <head> element.
If the HTML parser sees a custom element there, it'll close the document head from that point and the rest will be added to the document body. So if you need specific meta tags to be present in the head, you cannot replace those with a single custom element.
You should look for ways of abstracting and customizing the tags at the HTML templating level.
<html>
<head>
<script>
customElements.define("in-head", class extends HTMLElement {
connectedCallback() {
console.log(this.nodeName, "in:", this.parentNode);
document.head.append(Object.assign(document.createElement("style"), {
textContent: "body {background:green}",
onload: (e) => console.log("style in", e.target.parentNode)
}));
}
});
</script>
<in-head></in-head>
<script>
console.log("End of head", document.body.children);
</script>
</head>
<body>
</body>
</html>Note: running above snippet outputs a different result than running in the browser, because SOsnippet adds an additional <script> tag
See my Dev.to blog-post The head Web Component you never see in F12 Dev tools how I use a Web Component in the <head>