jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-tools

Gratis Declarative Shadow DOM Generator

Genereer HTML-snippets voor Declarative Shadow DOM met scoped CSS, slots en server-rendering.

Tool laden...

Wat is Declarative Shadow DOM Generator?

Declarative Shadow DOM is een browserfunctie die Shadow DOM creëert uit HTML-opmaak zonder JavaScript. Een template-element met het shadowrootmode-attribuut in een host-element vertelt de browser om een shadow root te maken en deze te vullen met de template-inhoud. Dit maakt server-side rendering van webcomponenten met scoped CSS mogelijk, werkend voordat JavaScript laadt.

Snel antwoord

Declarative Shadow DOM creëert ingekapselde DOM en scoped CSS uit HTML-opmaak zonder JavaScript. Gebruik <template shadowrootmode="open"> binnen een aangepast element host-tag. Ondersteund in Chrome, Edge en Safari. Voeg fallback-inhoud toe voor Firefox.

Last updated: 2026-05-28

Beperkingen

  • Firefox ondersteunt Declarative Shadow DOM nog niet (vanaf 2026). Voeg altijd fallback-inhoud toe die wordt weergegeven via CSS wanneer DSD niet wordt ondersteund.
  • Declarative Shadow DOM creëert alleen de shadow root en inhoud tijdens de initiële paginaverwerking. Dynamisch toegevoegde DSD-opmaak wordt niet verwerkt - gebruik imperative attachShadow() voor client-side creatie.
  • Sommige JavaScript-frameworks en bibliotheken integreren nog niet met Declarative Shadow DOM voor SSR-hydratatie. Controleer framework-ondersteuning voordat u DSD adopteert in een framework-gebaseerde app.

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

Zo gebruik je deze tool

  1. Voer een aangepaste element host-tag met een koppelteken in (vereist voor geldige aangepaste elementnamen).
  2. Kies open of gesloten shadow root modus - open staat JavaScript-toegang via shadowRoot toe.
  3. Voeg de innerlijke HTML-inhoud toe met slot-elementen voor contentprojectie.
  4. Voeg optioneel scoped CSS toe die alleen binnen deze shadow root van toepassing is.
  5. Kopieer het fragment en neem het op in uw SSR-uitvoer of statische HTML.

Waarvoor je het kunt gebruiken

  • Render een webcomponent met scoped CSS op de server zodat deze onmiddellijk verschijnt zonder JavaScript.
  • Maak een zelfstandige HTML-widget met geïsoleerde stijlen voor insluiting in elke pagina.
  • Bouw een statische sitecomponent met shadow DOM-inkapseling zonder een build-stap.

Gebruik

Praktische voorbeelden

Voorbeeld

Server-gerenderde gebruikerskaart

Een gebruikerskaartcomponent toont een avatar, naam en rol. Gebruik Declarative Shadow DOM om de kaart met scoped CSS op de server te renderen. De kaart verschijnt direct gestyled en JavaScript hydrateert deze voor interactiviteit.

Voorbeeld

Scoped CSS widget

Een inzetbare widget gebruikt Declarative Shadow DOM om zijn stijlen in te kapselen. De hostpagina CSS kan de widget niet beïnvloeden en de widget CSS kan niet naar buiten lekken. Geen iframe nodig.

Veelgemaakte fouten

  • Een host-tag zonder koppelteken gebruiken - aangepaste elementnamen moeten een koppelteken bevatten om geldig te zijn.
  • shadowrootmode closed instellen en verwachten toegang te krijgen tot de shadow root van buitenaf via JavaScript - closed modus blokkeert alle externe JavaScript-toegang.
  • Fallback-inhoud vergeten voor browsers die Declarative Shadow DOM niet ondersteunen - gebruikers zien niets in plaats van inhoud.

Verificatie

  1. Open het DevTools Elementen paneel en verifieer dat een #shadow-root aanwezig is in het host-element.
  2. Test de pagina met JavaScript uitgeschakeld om te bevestigen dat de shadow DOM correct wordt weergegeven zonder scripts.

FAQ

Vragen over Declarative Shadow DOM Generator

Welke browsers ondersteunen Declarative Shadow DOM?

Chrome 90+, Edge 90+ en Safari 17+ ondersteunen Declarative Shadow DOM. Firefox-ondersteuning is in ontwikkeling (vanaf 2026). Voeg voor niet-ondersteunde browsers fallback-inhoud toe in het host-element en gebruik CSS @supports om het te tonen/verbergen.

Kan ik declarative shadow DOM gebruiken met slots?

Ja. Slots werken op dezelfde manier in declarative shadow DOM als in imperative shadow DOM. Benoemde slots (slot name=heading) projecteren specifieke inhoud in de shadow root. Het standaard slot projecteert alle niet-toegewezen inhoud. Gebruik slots om declarative shadow DOM-componenten samenstelbaar te maken.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook