HTMLツール

無料宣言的Shadow DOMスニペットジェネレーター

Scoped CSS、スロット、サーバーレンダリング対応の宣言的Shadow DOM HTMLスニペットを生成します。

ツールを読み込み中...

宣言的Shadow DOMスニペットジェネレーターとは

Declarative Shadow DOM is a browser feature that creates Shadow DOM from HTML markup without JavaScript. A template element with the shadowrootmode attribute inside a host element tells the browser to create a shadow root and populate it with the template content. This enables server-side rendering of web components with scoped CSS, working before JavaScript loads.

クイックアンサー

Declarative Shadow DOM creates encapsulated DOM and scoped CSS from HTML markup without JavaScript. Use <template shadowrootmode="open"> inside a custom element host tag. Supported in Chrome, Edge, and Safari. Include fallback content for Firefox.

制限事項

Firefox does not yet support Declarative Shadow DOM (as of 2026). Always include fallback content displayed via CSS when DSD is not supported.
Declarative Shadow DOM only creates the shadow root and content during initial page parse. Dynamically added DSD markup is not processed — use imperative attachShadow() for client-side creation.
Some JavaScript frameworks and libraries do not yet integrate with Declarative Shadow DOM for SSR hydration. Check framework support before adopting DSD in a framework-based app.

使い方

Enter a custom element host tag with a hyphen (required for valid custom element names).
Choose open or closed shadow root mode — open allows JavaScript access via shadowRoot.
Add the inner HTML content with slot elements for content projection.
Optionally add scoped CSS that only applies inside this shadow root.
Copy the snippet and include it in your SSR output or static HTML.

主な用途

Render a web component with scoped CSS on the server so it appears immediately without JavaScript.
Create a self-contained HTML widget with isolated styles for embedding in any page.
Build a static site component with shadow DOM encapsulation without a build step.

用途

使用例

例

Server-rendered user card

A user card component shows an avatar, name, and role. Use Declarative Shadow DOM to render the card with scoped CSS on the server. The card appears styled immediately, and JavaScript hydrates it for interactivity.

例

Scoped CSS widget

An embeddable widget uses Declarative Shadow DOM to encapsulate its styles. The host page CSS cannot affect the widget, and the widget CSS cannot leak out. No iframe needed.

よくあるミス

Using a host tag without a hyphen — custom element names must contain a hyphen to be valid.
Setting shadowrootmode closed and expecting to access the shadow root from outside JavaScript — closed mode blocks all external JavaScript access.
Forgetting fallback content for browsers that do not support Declarative Shadow DOM — users see nothing instead of content.

検証

Open DevTools Elements panel and verify a #shadow-root is present inside the host element.
Test the page with JavaScript disabled to confirm the shadow DOM renders correctly without scripts.

FAQ

宣言的Shadow DOMスニペットジェネレーターのFAQ

Which browsers support Declarative Shadow DOM?

Chrome 90+, Edge 90+, and Safari 17+ support Declarative Shadow DOM. Firefox support is in development (as of 2026). For unsupported browsers, include fallback content inside the host element and use CSS @supports to show/hide it.

Can I use declarative shadow DOM with slots?

Yes. Slots work the same way in declarative shadow DOM as in imperative shadow DOM. Named slots (slot name=heading) project specific content into the shadow root. The default slot projects any unassigned content. Use slots to make declarative shadow DOM components composable.