Declaratieve Shadow DOM

Declarative Shadow DOM maakt echte servergerenderde webcomponenten mogelijk: de server schrijft de volledige shadow tree inline weg, de browser parseert en koppelt die voordat JavaScript wordt uitgevoerd, en hydration-JavaScript kan voortbouwen op een volledig gerenderde basis. Op gelijke voet met SSR van frameworks.

Dezelfde modi als bij imperatieve attachShadow: shadowrootmode="open" maakt de shadow beschikbaar als element.shadowRoot; shadowrootmode="closed" verbergt die. Het gedrag is identiek aan dat van de met JavaScript gekoppelde tegenhanger.

De browser koppelt de shadow root de eerste keer dat hij <template shadowrootmode> ziet. Zodra die is gekoppeld, wordt de template verbruikt — als je er later naar zoekt, krijg je niets terug. Dit komt overeen met de levensduur van attachShadow: een shadow bestaat zolang het element bestaat.

Lichte kinderen (de <p> buiten de <template> in het voorbeeld) worden geprojecteerd in <slot>-elementen binnen de shadow tree, net als bij imperatieve Shadow DOM. De compositie werkt hetzelfde; alleen het mechanisme voor koppelen verschilt.

Als <my-card> een geregistreerd aangepast element is, gebruikt het upgradeproces de al gekoppelde shadow root in plaats van opnieuw attachShadow aan te roepen. De klasse van het aangepaste element kan this.shadowRoot in zijn connectedCallback lezen zonder die zelf te hoeven maken.

De render van Lit-html, Astro-componenten en verschillende andere frameworks leveren nu declaratieve Shadow DOM mee in hun SSR-uitvoer. Zelf bouwen is haalbaar: elk systeem voor sjablonen op basis van tekenreeksen kan de template met shadowrootmode schrijven.

Declarative Shadow DOM is beschikbaar in Chrome, Edge, Safari en Firefox. Oudere browsers negeren het element <template> stilletjes — de inhoud in de template is onzichtbaar, wat een elegante terugval vormt voor omgevingen zonder ondersteuning.

Voor bredere ondersteuning kan een klein script door de DOM lopen en template[shadowrootmode] omzetten in echte shadow roots. Voer het uit voordat je aangepaste elementen registreert, zodat upgrades van volgende componenten de verwachte shadow tree zien.

Declarative Shadow DOM dupliceert de structuur: de inhoud van de template staat in de HTML, hoewel die ook in de klasse van het component is ingebouwd. Voor pagina's met veel exemplaren van hetzelfde component vergroot dit de payload. Frameworks ontdubbelen dit; bij zelfgeschreven SSR wil je dat mogelijk ook doen.

Als je webcomponenten levert en waarde hecht aan rendering vanaf de eerste byte of aan SEO — voer het nu in. De functie is stabiel, wordt ondersteund en verbetert het SSR-verhaal voor toepassingen op basis van webcomponenten aanzienlijk. Voor toepassingen zonder Shadow DOM is dit niet van toepassing.

Declarative Shadow DOM gebruikt <template shadowrootmode="open"> binnen een aangepast element om tijdens het parsen een shadow root te koppelen, zonder JS. Dit maakt echte SSR voor webcomponenten mogelijk: de shadow tree, bereikgebonden stijlen en slots werken allemaal vóór hydratatie. Het wordt ondersteund in alle moderne browsers; voor oudere browsers is een polyfill beschikbaar. Frameworks (Lit, Astro) leveren het automatisch.