Declarative shadow root adoption

[dead-claudia]

What problem are you trying to solve?

There's no way for declarative shadow roots to declaratively adopt styles, forcing JS to be used to add them. This partially defeats the point of using declarative shadow DOM at all, since it means some styles' application are unavoidably blocked on scripting.

What solutions exist today?

None, really. You could shim it with this as the first script element, though:

<script defer>
for (let t of document.querySelectorAll("template[shadowrootadopt]")) {
    let adopt = t.getAttribute("shadowrootadopt")
    t.removeAttribute("shadowrootadopt")
    for (let id of adopt.trim().split(/ +/g)) {
        let elem = document.getElementById(id)
        if (elem?.matches("style, link[rel~=stylesheet]") && elem.sheet) {
            t.adoptedStyleSheets.push(elem.sheet)
        }
    }
}
</script>

How would you solve it?

Add a shadowrootadopt="...", a token list of adopted <style> and <link rel="stylesheet"> IDs.

Anything else?

No response