jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-Tools

Kostenlose Declarative Shadow DOM Generator

Erstelle HTML-Snippets für Declarative Shadow DOM mit Scoped CSS, Slots und Server-Rendering.

Tool wird geladen...

Was ist Declarative Shadow DOM Generator?

Declarative Shadow DOM ist eine Browserfunktion, die Shadow DOM aus HTML-Markup ohne JavaScript erstellt. Ein template-Element mit dem shadowrootmode-Attribut innerhalb eines Host-Elements teilt dem Browser mit, einen Shadow-Root zu erstellen und mit dem Template-Inhalt zu befüllen. Dies ermöglicht serverseitiges Rendern von Webkomponenten mit gekapseltem CSS, die bereits vor dem Laden von JavaScript funktionieren.

Kurze Antwort

Declarative Shadow DOM erzeugt gekapseltes DOM und gekapseltes CSS aus HTML-Markup ohne JavaScript. Verwenden Sie <template shadowrootmode='open'> innerhalb eines benutzerdefinierten Host-Element-Tags. Unterstützt in Chrome, Edge und Safari. Fügen Sie Fallback-Inhalte für Firefox ein.

Last updated: 2026-05-28

Einschränkungen

  • Firefox unterstützt Declarative Shadow DOM noch nicht (Stand 2026). Fügen Sie immer Fallback-Inhalte ein, die über CSS angezeigt werden, wenn DSD nicht unterstützt wird.
  • Declarative Shadow DOM erstellt den Shadow-Root und Inhalt nur während der anfänglichen Seitenanalyse. Dynamisch hinzugefügtes DSD-Markup wird nicht verarbeitet —verwenden Sie für die clientseitige Erstellung imperatives attachShadow().
  • Einige JavaScript-Frameworks und -Bibliotheken integrieren sich noch nicht mit Declarative Shadow DOM für SSR-Hydration. Überprüfen Sie die Framework-Unterstützung, bevor Sie DSD in einer frameworkbasierten App einsetzen.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie einen benutzerdefinierten Host-Element-Tag mit Bindestrich ein (erforderlich für gültige benutzerdefinierte Elementnamen).
  2. Wählen Sie den offenen oder geschlossenen Shadow-Root-Modus —offen ermöglicht JavaScript-Zugriff über shadowRoot.
  3. Fügen Sie den inneren HTML-Inhalt mit slot-Elementen für die Inhaltsprojektion hinzu.
  4. Fügen Sie optional gekapseltes CSS hinzu, das nur innerhalb dieses Shadow-Roots gilt.
  5. Kopieren Sie das Snippet und binden Sie es in Ihre SSR-Ausgabe oder Ihr statisches HTML ein.

Wofür du es nutzen kannst

  • Eine Webkomponente mit gekapseltem CSS auf dem Server rendern, sodass sie sofort ohne JavaScript erscheint.
  • Ein in sich geschlossenes HTML-Widget mit isolierten Styles zur Einbettung in jede Seite erstellen.
  • Eine statische Seitenkomponente mit Shadow-DOM-Kapselung ohne Build-Schritt erstellen.

Anwendungsfalle

Praxisbeispiele

Beispiel

Serverseitig gerenderte Benutzerkarte

Eine Benutzerkartenkomponente zeigt einen Avatar, Namen und eine Rolle. Verwenden Sie Declarative Shadow DOM, um die Karte mit gekapseltem CSS auf dem Server zu rendern. Die Karte erscheint sofort gestaltet, und JavaScript hydriert sie für Interaktivität.

Beispiel

Widget mit gekapseltem CSS

Ein einbettbares Widget verwendet Declarative Shadow DOM, um seine Styles zu kapseln. Das Host-Seiten-CSS kann das Widget nicht beeinflussen, und das Widget-CSS kann nicht nach aussen dringen. Kein iframe erforderlich.

Haufige Fehler

  • Einen Host-Tag ohne Bindestrich verwenden —benutzerdefinierte Elementnamen müssen einen Bindestrich enthalten, um gültig zu sein.
  • shadowrootmode closed setzen und erwarten, von aussen per JavaScript auf den Shadow-Root zuzugreifen —der closed-Modus blockiert jeglichen externen JavaScript-Zugriff.
  • Fallback-Inhalte für Browser vergessen, die Declarative Shadow DOM nicht unterstützen —Benutzer sehen nichts anstatt Inhalt.

Überprüfung

  1. Öffnen Sie den DevTools-Elemente-Bereich und überprüfen Sie, ob ein #shadow-root innerhalb des Host-Elements vorhanden ist.
  2. Testen Sie die Seite mit deaktiviertem JavaScript, um zu bestätigen, dass das Shadow DOM ohne Skripte korrekt gerendert wird.

FAQ

Fragen zu Declarative Shadow DOM Generator

Welche Browser unterstützen Declarative Shadow DOM?

Chrome 90+, Edge 90+ und Safari 17+ unterstützen Declarative Shadow DOM. Die Firefox-Unterstützung ist in Entwicklung (Stand 2026). Für nicht unterstützte Browser fügen Sie Fallback-Inhalte innerhalb des Host-Elements ein und verwenden Sie CSS @supports, um diese ein-/auszublenden.

Kann ich Declarative Shadow DOM mit Slots verwenden?

Ja. Slots funktionieren in Declarative Shadow DOM genauso wie in imperativem Shadow DOM. Benannte Slots (slot name=heading) projizieren bestimmte Inhalte in den Shadow-Root. Der Standard-Slot projiziert nicht zugewiesene Inhalte. Verwenden Sie Slots, um Declarative Shadow DOM Komponenten zusammensetzbar zu machen.

Verwandte Tools

Weitere html-tools

Auch ausprobieren

Auch ausprobieren