用語集 › 🕸️ Web › Shadow DOM
【しゃどうどむ】

Shadow DOM とは？

💡 CSSが「外に漏れない」カプセル化されたDOM
📌 このページのポイント
Shadow DOM ― DOMのカプセル化 通常のDOM <div class="app"> <h1>タイトル</h1> <p>本文テキスト</p> <my-component> Shadow Host Shadow DOM 外部からアクセス不可 #shadow-root <style> スコープ付き <div>内部HTML</div> <slot> 外部コンテンツ挿入 CSSの衝突を防止 ・ コンポーネントの独立性を保証
Shadow DOMのイメージ
ひよこ ひよこ

なんでShadow DOMが必要なの？

ペンギン先生 ペンギン先生

大規模なWebアプリでは、CSSのクラス名が衝突して意図しないスタイルが当たる問題がある。Shadow DOMを使うと、コンポーネント内部のスタイルが外部に漏れないし、外部のスタイルが内部に侵入しない。BEM命名規則やCSS Modulesに頼らなくても、ブラウザレベルでカプセル化できるんだよ

ひよこ ひよこ

仮想DOMとは違うの？

ペンギン先生 ペンギン先生

まったく別物。仮想DOMはReact等がパフォーマンス向上のためにメモリ上に持つDOMのコピーで、差分だけ実DOMに反映する仕組み。Shadow DOMはブラウザ標準のAPIで、DOMツリーのスコープを隔離する仕組み。仮想DOMはレンダリング最適化、Shadow DOMはカプセル化が目的だよ

ひよこ ひよこ

どうやって使うの？

ペンギン先生 ペンギン先生

JavaScriptでelement.attachShadow({mode: 'open'})を呼ぶとShadow Rootが作られる。その中にHTMLを追加すると、外部のDOMやCSSから隔離される。modeがopenなら外部からshadowRootプロパティでアクセス可能、closedなら完全に非公開。通常はopenで十分だよ

ひよこ ひよこ

フレームワークとの相性は？

ペンギン先生 ペンギン先生

Lit（Google製）はShadow DOMを全面活用した設計。Vue3やAngularもWeb Componentsとしてのエクスポートに対応。ReactはShadow DOM内のイベントハンドリングに課題があったけど改善が進んでいる。マイクロフロントエンドで異なるフレームワークを混在させるときにShadow DOMが威力を発揮するよ

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「Shadow DOM」って出てきたら「CSSやDOMをカプセル化するブラウザ標準の仕組み」と思えればだいたいOK！
📖 おまけ：英語の意味
「Shadow Document Object Model」 ＝ 影のDOM
💬 Shadow（影）のように隠れたDOMツリー。外からは見えにくいけど確かに存在するよ
🔗 あわせて読みたい
← 用語集にもどる