IT-Lexikon › Web › Declarative Shadow DOM

Declarative Shadow DOM

Web Svenska → Aktualisiert: 2026-09-08

Eine Möglichkeit, Shadow DOM direkt im HTML-Markup zu erzeugen (über <template shadowrootmode="open">) statt ausschließlich per JavaScript. Das löste das größte Hindernis beim Server-Rendering von Web Components: Ohne es ließ sich Shadow DOM nur mit JS im Browser erzeugen.

Problem: Shadow DOM (die Kapselung in Web Components) wurde traditionell nur per JS (attachShadow()) erzeugt → ein Server konnte den gekapselten Inhalt einer Web Component nicht vorab rendern, sodass sie leer blieb, bis JS lief (schlecht für SSR, Performance und SEO). Declarative Shadow DOM macht die Kapselung direkt im vom Server gesendeten HTML ausdrückbar: Ein <template shadowrootmode> innerhalb des Elements wird beim Parsen automatisch zu dessen Shadow Root — kein JS nötig, um die Kapselung herzustellen. Ergebnis: Web Components lassen sich jetzt server-rendern und streamen, erscheinen sofort und hydrieren erst danach. Es war das fehlende Puzzleteil, um Web Components in der SSR-Welt praxistauglich zu machen. Breit unterstützt seit etwa 2023–2024.

← Zurück zum Lexikon