Webフロントエンド - 基礎

Shadow DOM しゃどーどむ

Web Componentsカプセル化DOMCSS スコープカスタム要素スタイル分離

Shadow DOMについて教えて

簡単に言うとこんな感じ！

Webページの部品に「プライベートルーム」を作る仕組みだよ！外のCSSやJavaScriptが勝手に入ってこられないし、中のスタイルも外に漏れない。部品を「完全独立パッケージ」として扱えるってこと！

Shadow DOMとは

Shadow DOM（シャドー DOM）とは、Webページを構成する要素（HTML の部品）に対して、外部から隔離されたプライベートな DOM ツリーを持たせる仕組みです。DOM（Document Object Model）とはブラウザがHTMLを解析して作るツリー構造のことで、Shadow DOM はそのツリーの中に「もう一つの隔離されたツリー」を入れ子にするイメージです。

通常の DOM（Light DOM と呼ぶこともあります）では、ページ全体のCSSやJavaScriptがすべての要素に影響を与えます。大規模なWebアプリになると「どこかで定義したCSSが意図しない場所に効いてしまう」「ライブラリのスタイルが自分のデザインを崩す」という問題が頻発します。Shadow DOM はこの問題を根本から解決し、部品単位でスタイルと構造をカプセル化（外部から隠蔽・保護）します。

Shadow DOM は Web Components という標準仕様を構成する技術の一つです。HTML の <video> タグや <input type="range"> など、ブラウザ組み込みのUI部品もこの仕組みを使って内部構造を隠しています。つまり「ブラウザ自身が昔からやっていたこと」を、一般の開発者も使えるようにしたのが Shadow DOM です。

Shadow DOM の構造と仕組み

主要な用語の整理

用語	意味
Shadow Host	Shadow DOM を持つ通常のHTML要素（外側の器）
Shadow Root	Shadow DOM ツリーの根っこ。`attachShadow()` で作成
Shadow Tree	Shadow Root 以下の DOM ツリー（プライベートな内部構造）
Light DOM	通常のページDOM（Shadow の外側の世界）
Shadow Boundary	Light DOM と Shadow DOM を隔てる境界線
Slot	Light DOM のコンテンツを Shadow DOM 内に差し込む「穴」

カプセル化のルール

外から中へのCSSは届かない：ページ全体に p { color: red; } と書いても、Shadow DOM 内の <p> には効かない
中から外へのCSSは漏れない：Shadow DOM 内で定義したスタイルはページ全体に影響しない
JavaScriptの querySelector は境界を越えない：document.querySelector() では Shadow DOM 内の要素を取得できない（Shadow Root から検索する必要がある）
一部の CSS カスタムプロパティ（変数）は越境できる：--my-color のような CSS 変数は Shadow Boundary を通過するため、外からのテーマカラー指定などに活用できる

Shadow DOM の作り方（基本コード）

// Shadow Host となる要素を作る
const host = document.querySelector('#my-widget');

// Shadow Root を取得（モードは open か closed）
const shadow = host.attachShadow({ mode: 'open' });

// Shadow Tree に HTML を追加
shadow.innerHTML = `
  <style>
    p { color: blue; } /* この p はページ全体に影響しない */
  </style>
  <p>これはプライベートなコンテンツです</p>
`;

mode の違い

mode	説明	使い所
`open`	外部JSから `element.shadowRoot` でアクセス可能	一般的な開発用途
`closed`	外部JSから `shadowRoot` が `null` になり非公開	ブラウザ組み込み部品など厳密な隠蔽が必要な場合

歴史と背景

2011年頃：Google のエンジニアが「Webのコンポーネント化」を目指す Web Components 構想を提唱。Shadow DOM はその中核技術として登場
2013年：Chrome が Shadow DOM v0 として初めて実装。当初は仕様が不安定で実験的な扱い
2016年：仕様を大幅に見直した Shadow DOM v1 が策定。attachShadow() APIが標準化される
2018年：Chrome・Safari・Firefox・Edge（Chromium版）の主要ブラウザすべてが Shadow DOM v1 をサポート完了。実用的な技術として普及へ
2019年〜：React・Vue・Angular などの主要フレームワークとの共存方法が整理され、デザインシステム（共通UIライブラリ）構築に活用されるケースが増加
現在：<video>・<input>・<details> などブラウザ標準要素の内部実装にも Shadow DOM が使われており、「見えないところで支える基盤技術」として定着

Light DOM・Virtual DOM との比較と関係

Shadow DOM は似た名前の「Virtual DOM」と混同されやすいので整理します。

比較項目	Shadow DOM	Virtual DOM
何者か	ブラウザ標準のDOM仕様	JavaScriptライブラリの実装手法
目的	スタイル・構造のカプセル化	描画の差分更新で高速化
代表的な使用技術	Web Components	React、Vue など
ブラウザ標準か	✅ W3C 標準仕様	❌ ライブラリ独自の概念
実際のDOMを操作するか	✅ する（本物のDOM）	DOMの前段階の仮想表現

Shadow DOM・Light DOM・Shadow Root の関係図

Web Components との関係

Shadow DOM は単体でも使えますが、Web Components を構成する3つの仕様の一部です。

Web Components
├── Custom Elements   … 独自のHTMLタグ（<my-widget>）を定義する
├── Shadow DOM        … 部品の内部構造・スタイルをカプセル化する  ← これ
└── HTML Templates    … <template>/<slot> で再利用可能な雛形を定義する

規格	内容
DOM Living Standard（WHATWG）	Shadow DOM の仕様本体。WHATWG が管理するリビング標準
CSS Scoping Module Level 1（W3C）	Shadow DOM 内の CSS スコープ・`:host` セレクターなどのスタイリング仕様