【しゃどうどむ】
Shadow DOM とは？
最終更新:
💡 部品のDOMとCSSに、範囲を分ける境界を作る
要素に独立したDOMツリーを付け、通常のDOM探索やCSSセレクターの範囲を分けるブラウザ標準の仕組み。Web Componentsのカプセル化に使われる。
📌 このページのポイント
ひよこ なんでShadow DOMが必要なの？
ペンギン先生 ひよこ 外側のCSSは全く影響しないの？
ペンギン先生 通常のセレクターは境界を越えないけど、完全に無関係ではないよ。色やフォントなどの継承、CSSカスタムプロパティで外側の値が伝わる。部品がpartを公開すれば、外側から::partでスタイルを指定する方法もあるんだ。
ひよこ どうやって作るの？
ペンギン先生 ホスト要素のattachShadowにmodeを指定するとshadow rootができるよ。その中へ要素やスタイルを追加する。たとえばopenなら、ホストのshadowRootから内部を操作できる。HTMLのtemplateで宣言する方法もあるよ。
ひよこ closedなら秘密を守れる？
ペンギン先生 closedではホストのshadowRootがnullになるけど、作成時に返された参照は使えるよ。外側から触ってほしくないという境界であり、強いセキュリティ機構ではない。秘密のデータを隠すために使うものではないんだ。
ひよこ slotは何をするの？
ペンギン先生 ホストの子として書いた内容を、内部で表示する位置へ割り当てる仕組みだよ。元の要素が内部のDOMへ移動するわけではない。部品の内部構造をまとめつつ、呼び出す側が表示内容を渡す接点になるんだ。
📖 おまけ：英語の意味
「Shadow DOM」 ＝ 影のDOM
💬 Shadowは「影」、DOMはDocument Object Modelの略。ホスト要素に付く別のDOMツリーを指すよ。