こんにちは！フロントエンドの現場を長年歩んできた私ですが、Webブラウザという巨大で謎めいたエンジンの内部を覗き見るとき、今でもワクワクが止まりません。

今回は、Web制作を少し進めると耳にする「Shadow DOM（シャドウ・ドム）」という、ちょっとカッコよくて秘密めいた機能についてお話しします。

「名前は聞いたことがあるけれど、なんだか難しそう……」
「普通のDOMと何が違うの？レンダリングに関係あるの？」

そんな風に身構えてしまう方も多いかもしれませんが、大丈夫ですよ。一つひとつ、身近な例えを交えながら優しく紐解いていきましょう！

—

そもそも「Shadow DOM」ってなに？（お部屋のプライバシーの例え）

Webページを作る時、私たちはHTMLという部品を使って、文字や画像を画面に並べていきますよね。ブラウザはそれを上から順に読み込んで、「DOM（Document Object Model）」というツリー構造（木のような家系図のようなもの）を作ります。

ここで想像してみてください。
あなたが大きなお家（Webページ）を建てたとします。リビングには家族みんなの家具（通常のDOM）が置いてあります。

しかし、その中に「完全にプライベートな子供部屋」や「鍵付きの秘密基地」を作りたくなったらどうでしょう？
リビングから子供部屋の中の散らかり具合は見えないほうがいいし、リビングの大きな掃除機で子供部屋の大切なプラモデルを吸い込んでしまっては困りますよね。

この「外の世界から完全に隔離された、自分だけの小さな小部屋」を作る仕組みこそが、Shadow DOMなんです。

—

ブラウザはこれをどうやってレンダリングしているの？

さて、ここからが本題です。ブラウザの裏側（レンダリングの舞台裏）で、Shadow DOMはどのように扱われているのでしょうか？

ブラウザが画面を表示するまでの流れを簡単に振り返ってみましょう。
1. HTMLをパース（解析）して、DOMツリーを作る。
2. CSSをパースして、CSSOMツリーを作る。
3. この2つを合体させて、画面に描画するための「レンダリングツリー」を作る。

通常、CSSのスタイル（デザイン）は、ページ全体に影響を与えます。「すべての `p` タグを赤色にする」と書けば、ページ中のすべての段落が赤くなります。

しかし、Shadow DOMの中にある要素は、この外からの「グローバルなスタイル」から守られています。これをカプセル化（スコープの分離）と呼びます。

レンダリングツリーへの影響とパフォーマンスの秘密

ブラウザのエンジンから見ると、Shadow DOMは「一つの大きなDOMツリーの中にぶら下がった、独立したミニツリー」として扱われます。

スタイルの計算が速くなる（可能性がある）

外側の巨大なCSSが「この小部屋の中の要素に影響するかな？」と隅々まで探す必要がありません。ブラウザはスコープを限定してスタイルを計算できるため、無駄な計算コストを省くことができます。

再描画（リペイント／リフロー）の局所化

もしShadow DOMの中だけでアニメーションが動いたり、要素が書き換わったりしたとき、ブラウザは「お、あの秘密基地の中だけで起きてる変化だな」と察知します。ページ全体のレイアウトを再計算する範囲を狭められるため、パフォーマンスの維持に一役買ってくれるのです。

—

実際にコードを書いて見てみよう！

百聞は一見にしかず。実際にShadow DOMをコードで作ってみましょう。
エディタを開いて、以下のHTMLを保存し、ブラウザで開いてみてください。

Shadow DOMの体感テスト

通常のDOMの世界

この文章は、外側のCSSが効いているので「青色」になります。

{/ — ここから下がShadow DOMの世界 — /}

ブラウザで確認してみると…？

画面には、以下の2つの文章が表示されます。
1. 外側の普通の文章：青色・通常サイズ
2. Shadow DOMの中の文章：赤色・大きくて太い文字

外側のCSSで `p { color: blue; }` と指定しているにもかかわらず、Shadow DOMの中の `

` タグは見事に無視して「赤色」になっていますよね。これが、スタイルがカプセル化されている（守られている）という強力なメリットです。

—

現場のプロからのアドバイス（つまずきやすいポイント）

Shadow DOMはとても便利ですが、実務で使うときには少しだけ注意が必要です。

1. 「CSSが効かない！」と焦る日ビギナーズ・ハイ
「あれ？グローバルで作ったCSSが、このコンポーネントの中だけ当たらないぞ？」と最初は必ずハマります。それは仕様（意図された挙動）です。コンポーネントのデザインは、基本的にその内部で完結させる必要があります。
2. SEOやアクセシビリティへの配慮
Shadow DOMの中身は、検索エンジンのクローラー（Googleのボットなど）やスクリーンリーダー（視覚障がい者向けの読み上げソフト）から見えづらい、あるいは解釈されにくい場合があります。重要なテキストやメインのナビゲーションには、無理にShadow DOMを使わず、通常のDOMを使うのが無難です。

—

まとめ

Shadow DOMとは？：Webページの中に作る「プライベートな小部屋」。
レンダリングへの影響：スタイルや構造がカプセル化されるため、ブラウザのスタイル計算のスコープがスッキリし、パフォーマンス面でもメリットがある。
使いどころ：再利用したいUIパーツ（ボタンやタブメニューなど）を、他のコードのスタイル衝突から守りたいときに大活躍する。

最初は難しく感じるブラウザの裏側の仕組みも、こうして身近な例えと小さなコードで触れていけば、怖くありません。
ぜひご自身の環境でもコードを動かして、「お、ちゃんと外のCSSをガードしてるな！」と体感してみてくださいね。

あなたのフロントエンドの旅が、もっと楽しく快適なものになりますように！

【入門編】 Shadow DOMがレンダリングに与える影響 – Webブラウザの仕組み実践ガイド