用語集 › 🕸️ Web › 宣言的Shadow DOM
【せんげんてきしゃどーどむ】

宣言的Shadow DOM とは？

公開:
💡 JavaScriptなしで「自分だけのスタイル空間」をHTMLで宣言する
📌 このページのポイント
宣言的Shadow DOM HTMLマークアップ <my-card> <template shadowrootmode="open"> <style>...</style> <slot /> </template> </my-card> パース シャドウツリー（自動構築） shadow host shadow root スタイル カプセル化 外部CSS遮断 内部CSS非漏れ 従来 vs 宣言的 従来：JS必須 → SSRでスタイル崩れ attachShadow() を呼ぶまで無効 宣言的：HTML だけで有効 JS 読み込み前でも崩れない
宣言的Shadow DOMはtemplate要素だけでシャドウツリーを構築し、SSRとも相性がよい
ひよこ ひよこ
ペンギン先生、宣言的Shadow DOMって何なの？Shadow DOMとどう違うの？
ペンギン先生 ペンギン先生
普通のShadow DOMはJavaScriptで element.attachShadow() を呼び出さないと作れなかったんだよ。宣言的Shadow DOMは <template shadowrootmode="open"> というHTMLタグを書くだけでシャドウDOMが作れる仕組みだよ。
ひよこ ひよこ
JavaScriptなしで書けるのは便利だけど、それがなぜ重要なの？
ペンギン先生 ペンギン先生
SSRと相性がすごく良くなるんだよ。SSRはサーバーでHTMLを作ってブラウザに送るけど、従来のShadow DOMはJSが動いてからじゃないとカプセル化が有効にならなかったんだ。つまりJSが読み込まれる前の一瞬、スタイルが崩れて見えることがあったんだよ。
ひよこ ひよこ
カプセル化ってどういう意味なの？
ペンギン先生 ペンギン先生
Web Componentの内部のCSSと外のCSSが干渉しないようにする仕組みだよ。コンポーネントのスタイルが外のページに影響したり、外のCSSがコンポーネントの中に漏れ込んだりしないようにする「スタイルの壁」だね。
ひよこ ひよこ
宣言的Shadow DOMを使うと、その問題が解決するんだね！
ペンギン先生 ペンギン先生
そうだよ。サーバーがHTMLを生成する時点で <template shadowrootmode="open"> が含まれていれば、ブラウザはHTMLをパースしながらシャドウDOMを構築するんだ。JSが一行も実行されていなくてもカプセル化が有効なんだよ。
ひよこ ひよこ
実際にどうやって書くの？
ペンギン先生 ペンギン先生
カスタム要素の内部で <template shadowrootmode="open"> を使うよ。その中にスタイルやHTMLを書くと、そのコンポーネント専用のシャドウDOMが作られるんだ。Chrome 111・Safari 16.4・Firefox 123以降で対応済みで、今や主要ブラウザ全部で動くWeb標準になっているよ。
ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「宣言的Shadow DOM」って出てきたら「HTMLだけでシャドウDOMを作れるWeb標準」と思えればだいたいOK！
📖 おまけ：英語の意味
「Declarative Shadow DOM」 ＝ 宣言的Shadow DOM
💬 DOMをJavaScriptで命令的（imperatively）に操作するのではなく、HTMLタグで「宣言（declare）」するだけで動く仕組みからきているよ。
🔗 あわせて読みたい
← 用語集にもどる