【せんげんてきしゃどーどむ】
宣言的Shadow DOM とは？
最終更新:
💡 JavaScriptなしで「自分だけのスタイル空間」をHTMLで宣言する
HTMLのtemplate要素でShadow DOMを宣言する仕組み。対応ブラウザがHTMLを解析するときにシャドウツリーを作るため、サーバーで生成したHTMLでも内部構造を表現できる。
📌 このページのポイント
- templateにshadowrootmode="open"などを指定し、親要素にShadow DOMを作る
- シャドウツリーの作成に、ブラウザ側のattachShadow()呼び出しを必須としない
- サーバー生成HTMLをブラウザが解析する際に構築され、動作の追加にはJavaScriptを使うこともある
- shadowrootmodeはChrome 111+・Safari 16.4+・Firefox 123+で対応する
ひよこ 宣言的Shadow DOMって、普通のShadow DOMとどう違うの？
ペンギン先生 できるシャドウツリーはShadow DOMだよ。作り方が違って、JavaScriptのattachShadow()の代わりに、HTMLのtemplateにshadowrootmode="open"などを指定する。対応するブラウザが解析すると、そのtemplateの親要素にシャドウルートを作るんだ。
ひよこ JavaScriptなしで書けると何が便利なの？
ペンギン先生 ペンギン先生 通常のCSSセレクターが内部へ入り込まないよう、適用範囲を分けるよ。ただし文字色やフォントなどの継承、CSSカスタムプロパティの値は届くことがある。宣言的な作り方でもこの性質は同じで、完全に影響を断つ壁ではないんだ。
ひよこ 使えばJavaScriptも表示崩れもなくなる？
ペンギン先生 シャドウツリーを作るだけならJavaScriptなしでよいけれど、独自の操作や状態更新にはJavaScriptを追加する場合があるよ。外部のスタイルシートやフォントの読み込みなどでも見た目は変わる。SSRとの連携を助ける仕組みで、すべての表示変化を防ぐ保証ではないんだ。
ひよこ 実際に書くときの注意は？
ペンギン先生 Shadow DOMを持てる要素の中に、templateとshadowrootmode属性を置くよ。基本の属性はChrome 111・Safari 16.4・Firefox 123以降で対応している。ただし、同じ文字列をinnerHTMLへ入れるだけではシャドウルートは作られない。読み込み方と、使う追加機能の対応も確認するんだ。
まとめ：ざっくりこれだけ覚えればOK！
📖 おまけ：英語の意味
「Declarative Shadow DOM」 ＝ 宣言的Shadow DOM
💬 DOMをJavaScriptで命令的（imperatively）に操作するのではなく、HTMLタグで「宣言（declare）」するだけで動く仕組みからきているよ。