宣言的Shadow DOMスニペットジェネレーターとは
宣言的シャドウDOMはJavaScriptなしでHTMLマークアップからシャドウDOMを作成するブラウザ機能です。ホスト要素内のshadowrootmode属性を持つtemplate要素はブラウザにシャドウルートを作成しテンプレートコンテンツを投入するように指示します。これによりスコープ付きCSSを持つウェブコンポーネントのサーバーサイドレンダリングが可能になりJavaScriptが読み込まれる前に機能します。
クイックアンサー
宣言的シャドウDOMはJavaScriptなしでHTMLマークアップからカプセル化されたDOMとスコープ付きCSSを作成します。カスタム要素のホストタグ内で <template shadowrootmode="open"> を使用します。Chrome、Edge、Safariでサポートされています。Firefox用のフォールバックコンテンツを含めてください。
Last updated: 2026-05-28
制限事項
- Firefoxはまだ宣言的シャドウDOMをサポートしていません（2026年現在）。DSDがサポートされていない場合にCSSで表示されるフォールバックコンテンツを常に含めてください。
- 宣言的シャドウDOMは最初のページ解析時にのみシャドウルートとコンテンツを作成します。動的に追加されたDSDマークアップは処理されません。クライアントサイド作成には命令的attachShadow()を使用してください。
- 一部のJavaScriptフレームワークやライブラリはSSRハイドレーションのための宣言的シャドウDOMとまだ統合されていません。フレームワークベースのアプリでDSDを採用する前にフレームワークのサポートを確認してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- ハイフンを含むカスタム要素のホストタグを入力します（有効なカスタム要素名に必要）。
- オープンまたはクローズドのシャドウルートモードを選択します。オープンはshadowRootを介したJavaScriptアクセスを許可します。
- スロット要素を使用したコンテンツ投影用の内部HTMLコンテンツを追加します。
- オプションでこのシャドウルート内でのみ適用されるスコープ付きCSSを追加します。
- スニペットをコピーしてSSR出力または静的HTMLに含めます。
主な用途
- JavaScriptなしで即座に表示されるようにスコープ付きCSSを持つウェブコンポーネントをサーバー上でレンダリングします。
- 任意のページに埋め込むためのスタイルが分離された自己完結型HTMLウィジェットを作成します。
- ビルドステップなしでシャドウDOMのカプセル化を使用した静的サイトコンポーネントを構築します。