シャドウdomとは？初心者にもわかる基本と使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

シャドウdomとは何か

ウェブページにはさまざまな部品があります。シャドウdomは、その部品を“別の小さな世界”として分けて管理できる仕組みです。通常の DOM では、ページ内の要素同士が影響しあいやすいことがありますが、シャドウdom は部品ごとに独立した DOM ツリーを作ることで影響範囲を限定します。これにより、再利用性が高まり、スタイルの衝突を減らすことができます。

どういうときに役立つのか

大規模なウェブサイトや再利用可能な UI を作るとき、ボタンやカードなどの部品を他の部分と干渉せずに開発したいことが多いです。シャドウdomを使うと、CSS の競合を避け、部品ごとにスタイルを完結させられます。また、別の人が同じ部品を再利用する際にも、内部の構造が外部のページに影響されず安全に動作します。

仕組みと作り方

シャドウdom は、HTML 要素に対して “shadow root” を作ることで始まります。コードはおおむね次のように書きます。const host = document.querySelector('#box'); const shadow = host.attachShadow({mode: 'open'}); shadow.innerHTML = '<div>シャドウ内のコンテンツ</div>'; ここで mode: 'open' は外部から shadow root を参照できる状態、mode: 'closed' は外部からアクセスできない状態を指します。開放モード は検証やデバッグのとき便利で、閉じたモード はセキュリティ寄りの用途に向きます。

使い方の基本ステップ

以下は基本的な進め方の要点です。

1) ホスト要素をページに用意する。<span>例: <div id='card'></div>

2) ホストにシャドウを作成する。host.attachShadow({mode: 'open'});

3) シャドウ内に必要な HTML を挿入する。shadow.innerHTML = '<style>...</style><div>内容</div>';

長所と注意点

長所としては、スタイルの衝突を避けられる、UI 部品を再利用しやすい、コンポーネントの再配置が柔軟になる点が挙げられます。一方で注意点として、検索エンジンのクロールや一部の古いブラウザに対応が必要な場合がある、そして イベントのバインディング方法が従来の DOM とは少し異なる ことがあります。開発の初期には、対応ブラウザやデバッグの方法を事前に確認しておくと良いでしょう。

シャドウdom の基本を表で見る

<th>項目

説明
目的	部品を独立した DOM ツリーとして切り分け、影響範囲を限定する。
モード	open: 外部から参照可能 / closed: 外部から不可
CSS の影響	シャドウ内のスタイルは外部に影響しない
再利用性	UI コンポーネントの再利用が容易になる

結論

シャドウdom は、現代のウェブ開発で「部品を安全に、再利用可能に作る」ための強力な道具です。初期は少し難しく感じるかもしれませんが、部品化の考え方を理解すると、保守性の高い UI を作る助けになります。

シャドウdomの同意語

Shadow DOM: Web Componentsの機能のひとつ。要素の内部に独立した“影のDOM”ツリーを作り、外部のCSSやJavaScriptの影響を受けにくくする仕組み。
シャドウ DOM: Shadow DOMの日本語表記。ウェブコンポーネントの内部DOM（シャドウツリー）を指す用語。
シャドウドム: 誤表記・略称として使われることがある表現。正式にはShadow DOM。
シャドウルート: Shadow Rootの日本語表現。シャドウツリーの根ノード。
Shadow Root: Shadow DOMの根ノード。シャドウツリーの入口となる要素。
シャドウツリー: Shadow Treeの日本語表現。Shadow DOM内部のツリー構造全体を指す概念。
Shadow Tree: Shadow Treeの英語表現。Shadow DOM内部のツリー構造。
Shadow DOM v1: Shadow DOMの仕様バージョン1。現行の標準仕様。
Open Shadow Root: 開放モードのShadow Root。外部からアクセス可能なモード。
Closed Shadow Root: クローズドモードのShadow Root。外部からアクセス不可のモード。

シャドウdomの対義語・反対語

ライト DOM: シャドウ DOM の対義語とされる概念。通常の DOM ツリーで、Shadow DOM の隔離・カプセル化が適用されず、スタイルのスコープも影響を受けない状態。
通常の DOM: Shadow DOM を使わない、文書全体の通常の DOM。外側のコンポーネントと同じスコープで動作し、CSS の encapsulation がない。
シャドウなし DOM: シャドウ DOM が適用されていない状態の DOM。分離された影のツリーを持たず、すべての要素が同一の DOM ツリーに属する。
プレーン DOM: 特別なカプセル化を前提としない“プレーン”な DOM のこと。シャドウ DOM の概念を前提にしていない場面で使われる表現。
オープン Shadow DOM: Shadow Root が open に設定されており、外部から shadowRoot へのアクセスが可能なモード。内部を検査・操作しやすい。
クローズド Shadow DOM: Shadow Root が closed に設定されており、外部から shadowRoot を直接参照できないモード。カプセル化が強い。

シャドウdomの共起語

シャドウDOM: Web Components の機能の一つで、要素の内部を外側の DOM から分離してカプセル化を実現する“影の DOM”の領域です。
シャドウルート: シャドウ DOM の根。通常は要素に attachShadow を使って作成します。
openモード: シャドウルートのモードの一つで、外部から shadowRoot へアクセス可能です。
closedモード: シャドウルートのモードの一つで、外部から shadowRoot へアクセスできません。
attachShadow: 要素にシャドウルートを作成する JavaScript API。
host要素: シャドウ DOM を含む外側の要素。
slot: シャドウ内のプレースホルダで、Light DOM の子要素をここへ挿入するためのポイントです。
::slotted: シャドウ内のスロットに挿入されたライト DOM の要素を CSS で選択するための特殊セレクタ。
::part: シャドウ内の要素を外部の CSS からスタイル指定できる公開部品。
::shadow: 旧仕様で使われていたセレクタ。現行では非推奨。
Light DOM: シャドウ DOM の対となる通常の DOM。
Custom Elements: 独自の HTML 要素を定義できる Web Components の核となる機能。
Web Components: シャドウ DOM、カスタム要素、テンプレートなどを組み合わせた再利用可能なコンポーネント技術。
CSSスコープ: シャドウ DOM 以外には影響を及ぼさない、影内部の CSS の適用範囲の概念。
CSS変数: シャドウ内でも使える CSS 変数。
Delegates Focus: フォーカスをシャドウ内の要素へ委譲する挙動。
shadowRootプロパティ: 要素の shadowRoot を取得・操作する公開 API。
Template: テンプレート要素。シャドウ DOM の初期構造を定義するのに使われます。
ポリフィル: 古いブラウザ対応のためのライブラリ。シャドウ DOM の実装を補完します。
ブラウザサポート: 主要ブラウザの Shadow DOM の対応状況。
アクセシビリティ: シャドウ DOM 内部の要素がスクリーンリーダーなどにどう伝わるか、適切な設計が必要です。
パフォーマンス: encapsulation による再計算コストやレンダリングの影響を理解することが重要です。
イベントリターゲティング: シャドウ内イベントが外部へ伝搬する際の挙動。
ShadowDOMv1: 現在の標準仕様。mode、shadowRoot、::part などを含みます。
ShadowDOMv0: 旧仕様で、現在は推奨されません。