Deklaratives Shadow DOM
Fügen Sie Shadow DOM ohne JavaScript aus HTML heraus mit shadowrootmode hinzu
Deklaratives Shadow DOM ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Das Problem, das es löst
Das traditionelle Shadow DOM wird über JavaScript (attachShadow) erstellt. Bei serverseitig gerenderten Seiten bedeutet das, dass der Shadow Tree leer bleibt, bis JavaScript ausgeführt wird – damit wird der Zweck von SSR verfehlt, vollständiges HTML bereits mit dem ersten Byte auszuliefern. Declarative Shadow DOM schafft Abhilfe.
Das Attribut shadowrootmode
Ein mit shadowrootmode="open" deklariert beim Parsen eine Shadow Root in HTML. Der Browser hängt die Shadow Root automatisch an das übergeordnete Element an; der Inhalt des Templates wird zum Shadow Tree. Dafür ist kein JavaScript erforderlich.
<my-card>
<template shadowrootmode="open">
<style>:host { display: block; padding: 16px; }</style>
<slot></slot>
</template>
<p>This goes into the slot</p>
</my-card>SSR mit Web Components
Declarative Shadow DOM ermöglicht echte serverseitig gerenderte Web Components: Der Server gibt den vollständigen Shadow Tree direkt aus, der Browser parst ihn und hängt ihn an, bevor JavaScript ausgeführt wird, und Hydration-JavaScript kann einen vollständig gerenderten Ausgangszustand übernehmen. Damit stehen Web Components Frameworks bei SSR gleich.
Modus: open oder closed
Es gelten dieselben Modi wie bei imperativem attachShadow: shadowrootmode="open" macht den Shadow Tree über element.shadowRoot zugänglich; shadowrootmode="closed" verbirgt ihn. Das Verhalten ist identisch mit dem des per JavaScript angehängten Gegenstücks.
Einmal pro Element geparst
Der Browser hängt die Shadow Root an, sobald er erstmals auf das trifft. Nach dem Anhängen wird das Template verbraucht – eine spätere Abfrage liefert nichts zurück. Das entspricht dem Lebenszyklus von attachShadow: Eine Shadow Root besteht für die Lebensdauer des Elements.
Slots funktionieren wie gewohnt
Light-Children (das <p> außerhalb des <template> im Beispiel) werden in <slot>-Elemente innerhalb des Shadow Trees projiziert, genau wie beim imperativen Shadow DOM. Das Kompositionsmodell ist identisch; nur der Mechanismus zum Anhängen unterscheidet sich.
Mit Custom Elements kombinieren
Wenn <my-card> als Custom Element registriert ist, übernimmt der Upgrade-Prozess die bereits angehängte Shadow Root, statt erneut attachShadow aufzurufen. Die Custom-Element-Klasse kann in ihrem connectedCallback this.shadowRoot lesen, ohne die Shadow Root erstellen zu müssen.
Unterstützung durch Server-Tools
Lit-htmls render, Astro-Komponenten und mehrere andere Frameworks geben Declarative Shadow DOM inzwischen als Teil ihrer SSR-Ausgabe aus. Eine eigene Lösung ist umsetzbar: Jedes String-Templating-System kann das Template mit shadowrootmode schreiben.
Browserunterstützung
Declarative Shadow DOM ist in Chrome, Edge, Safari und Firefox verfügbar. Ältere Browser ignorieren das <template>-Element stillschweigend – der Inhalt des Templates bleibt unsichtbar. Das ermöglicht eine elegante Degradation in nicht unterstützenden Umgebungen.
Strategie für Polyfills
Für eine breitere Unterstützung kann ein kleines Script das DOM durchlaufen und template[shadowrootmode] in echte Shadow Roots umwandeln. Führen Sie es vor der Registrierung von Custom Elements aus, damit nachfolgende Upgrades der Komponenten den erwarteten Shadow Tree vorfinden.
Abwägungen
Declarative Shadow DOM dupliziert die Struktur: Der Inhalt des <template> steht im HTML, obwohl er auch in die Klasse der Komponente eingebaut ist. Bei Seiten mit vielen Exemplaren derselben Komponente vergrößert dies die Payload. Frameworks vermeiden Duplikate; bei selbst implementiertem SSR kann dies ebenfalls sinnvoll sein.
Wann Sie es einsetzen sollten
Wenn Sie Web Components ausliefern und Wert auf Rendering ab dem ersten Byte oder SEO legen, sollten Sie es jetzt einsetzen. Die Funktion ist stabil, wird unterstützt und verbessert die SSR-Unterstützung für Anwendungen auf Basis von Web Components erheblich. Für Anwendungen ohne Shadow DOM ist sie nicht relevant.
Wissenscheck
Welches Problem löst Declarative Shadow DOM im Vergleich zu imperativem attachShadow?
Zusammenfassung
Declarative Shadow DOM verwendet innerhalb eines Custom Elements , um beim Parsen eine Shadow Root anzuhängen – ganz ohne JavaScript. Dadurch wird echtes SSR für Web Components ermöglicht: Shadow Tree, bereichsbezogene Styles und Slots funktionieren bereits vor der Hydration. Die Funktion wird von allen modernen Browsern unterstützt; für ältere Browser ist ein Polyfill verfügbar. Frameworks wie Lit und Astro geben sie automatisch aus.
Häufig gestellte Fragen
Ist die Lektion „Deklaratives Shadow DOM“ kostenlos?
Ja — der vollständige Text von „Deklaratives Shadow DOM“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Deklaratives Shadow DOM“?
Fügen Sie Shadow DOM ohne JavaScript aus HTML heraus mit shadowrootmode hinzu Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Deklaratives Shadow DOM“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Deklaratives Shadow DOM
- Die Popover API
- Das selectlist-Element
- Interest Invokers und das command-Attribut