Shadow DOMの「分離」を極める——ブラウザのレンダリングパイプラインをハックする技術
やあ。現場でCSSのクラス名汚染に頭を抱えたり、意図しないスタイル漏洩に夜も眠れない日々を過ごしてはいないか？
「Web Componentsはオワコン」なんて言う奴もいるが、それはただの食わず嫌いだ。大規模なアプリケーションや、堅牢なデザインシステムを構築する際、Shadow DOMはブラウザが提供する最強の「防波堤」になる。
今日は、表面的な使い方ではなく、ブラウザの内部構造がShadow DOMをどう扱い、なぜそれが「分離」を実現しているのか、その泥臭い仕組みの話をしよう。
—
1. ブラウザはShadow DOMをどう「別世界」として認識しているか
通常、ブラウザはHTMLをパースして`DOMツリー`を構築し、同時にCSSを`CSSOM`に変換して、両者をマージして`Render Tree`を作る。このとき、グローバルなスタイルは全要素に影響を与えるのがWebの宿命だ。
しかし、Shadow DOMを生成した瞬間、ブラウザの内部処理はガラリと変わる。
「Shadow Root」という名の境界線
Shadow DOMは、メインのDOMツリーとは物理的に分離された「影のツリー」として生成される。ブラウザのパースエンジン（BlinkならBlink）は、Shadow Rootを見つけると、そこを「サブツリーの境界（Boundary）」としてマークする。
ここが重要だ。
- カプセル化の真実: メインの`querySelector`は、Shadow Rootの中身を覗き見ることができない。ブラウザは内部的に「このスコープの外からはアクセス不可」というフラグを立てて管理しているからだ。
- スタイルの独立: Shadow DOM内の`