Shadow DOMのカプセル化とスロット合成

shadowツリーは「探索を止める境界」である

element.attachShadow({ mode: "open" }) を呼ぶと、そのホスト要素（shadow host）にshadowルートを根とする独立したツリーがぶら下がります。重要なのは、これが単なる入れ子のDOMではなく、セレクタ照合とスタイル解決の探索をその境界で打ち切る仕組みだという点です。shadowツリー内のスタイルシートが照合できるのはそのツリー内の要素だけで、外側（document）のセレクタはshadowルートを越えて内部を選べません。逆もまた然りで、内部の p { color: red } は外の <p> に届きません。カプセル化の本体は「DOMの隠蔽」ではなく「探索範囲（scoping）の分断」です。

ホスト自身は外側のツリーに属する普通の要素で、内部ツリーの根がshadowルートです。この二重性が後述する合成と再ターゲットのすべての出発点になります。mode には open と closed があり、open では host.shadowRoot で外から参照できますが、closed では null を返し参照経路を塞ぎます。ただし closed はあくまで参照のしにくさで、セキュリティ境界ではありません。

slotとflattened tree：光と影の合成

部品の利用者がホストの子として書いた要素（light DOMの子）は、そのままでは画面に出ません。shadowツリー内に置いた <slot> が差し込み口となり、ホストの子をその位置へ投影（projection）します。<slot name="x"> には light 側の slot="x" を持つ子が、名前なしslotには slot 属性を持たない子が割り当てられます。

ここで決定的なのが、ブラウザがレイアウト・描画・スタイル継承に使うのは元のDOMそのものではなく、light と shadow を合成した一本のツリー＝flattened tree（平坦化ツリー）だという点です。slotの位置に、割り当てられた light の子が見かけ上挿入された木が組み立てられ、これが描画の対象になります。

light DOM（ホスト側に書いた木）
  <my-card>
    <span slot="title">見出し</span>   ← slot="title"
    <p>本文</p>                         ← 名前なし
  </my-card>

shadow DOM（部品内部の木）
  #shadow-root
    <header><slot name="title"></slot></header>
    <section><slot></slot></section>

flattened tree（合成後、描画に使う木）
  <my-card>
    #shadow-root
      <header> → <span slot="title">見出し</span>
      <section> → <p>本文</p>

ここで注意すべきは、要素の所属は移動しないことです。<span slot="title"> の parentNode は依然 <my-card> であり、shadowツリー内の <header> ではありません。移るのは「flattened tree 上の見かけの位置」だけです。slot.assignedNodes() で割り当て先を、element.assignedSlot で逆引きできます。CSSの継承（color や font-size）や z-index の文脈は flattened tree をたどるため、slotに入った light 要素は、light 側で指定したスタイルを保ちつつ、shadow 側のslot位置の継承も受けます。この合成こそが Web コンポーネント の柔軟さの源です。

スタイルの境界：何が漏れ、何が通り抜けるか

shadowツリーのスタイル隔離はセレクタの照合に対する境界であって、継承値に対する境界ではありません。ここを取り違えると挙動を見誤ります。

つまり「Shadow DOM に外のCSSが一切効かない」は不正確です。セレクタで内部要素を直接狙う経路は塞がれる一方、継承プロパティとカスタムプロパティは境界を素通りします。だからテーマ設計では、内部で color: var(--card-fg) のようにカスタムプロパティを読み、外からその変数値だけを流し込む方法が定石になります。ホスト要素自身は :host で内部から選べ、利用文脈に応じて :host(.dark)、slotの空状態は :host(:empty) ではなく slot 側の ::slotted 不在で扱うなど、専用セレクタが用意されています。詳細度やカスケードの基本規則は CSSカスケード・詳細度・継承の解決アルゴリズム と同じく適用されますが、適用範囲がツリー単位に区切られる点が違いです。

::part()と::slotted()：貫通の二経路

境界を意図的に開ける穴が2つあります。狙う対象が影の木の中身か光の木の中身かで使い分けます。

::part() は、部品側が内部要素に part="label" と印を付けたものを、外から my-card::part(label) で狙う経路です。属性セレクタのような自由な照合はできず、作者が明示的に公開したpartだけが対象になります。多段にネストしたコンポーネントでは、内側のpartを外へ中継するために exportparts を使います。exportparts="label: card-label" のように、内側のpartを外向けの別名で再公開し、これを連ねた経路でのみ最外周まで届きます。中継が一段でも欠ければそこで止まります。

::slotted() は逆に、slotに差し込まれた light 要素を shadow 側のスタイルから狙う経路です。重要な制約は、::slotted(span) が選べるのはslotに割り当てられた最上位ノードだけで、その子孫（::slotted(span p) のような深い指定）は選べないことです。light 要素の中身のスタイルは light 側（document）の責任、という線引きです。

イベントの境界と再ターゲット（retargeting）

イベントは flattened tree に沿ってバブリングしますが、shadow 境界には固有の規則があります。第一に composed フラグです。composed: false のイベント（多くのUIイベントの一部や独自イベントの既定）はshadow境界の手前で止まり外へ出ません。composed: true（click、input、ほとんどのマウス・キーボードイベント等）は境界を越えて document まで上がります。

第二が再ターゲット（retargeting）です。composed: true のイベントが境界を越えて外のリスナへ届くとき、event.target はそのリスナから見えるツリー上の要素へ付け替えられます。shadowツリー内部の本当のクリック対象を外へそのまま見せると、カプセル化が破れるためです。外のリスナでは event.target はホスト要素になり、内部の実要素は隠れます。ただし event.composedPath() を呼べば、内部実要素からwindowまでの実際の伝播経路を取得でき、open なshadowツリー内のノードも見えます（closed では経路から内部が省かれます）。relatedTarget（mouseover等）や focus 系の対象も同様に再ターゲットされます。

shadow内部の <button> をclick（composed: true）
  内部リスナ:   event.target = <button>（実体）
  ホスト外リスナ: event.target = <my-card>（再ターゲット後）
  どちらでも:    event.composedPath() で実経路 [<button>, …, <my-card>, …, window]

この再ターゲットの理解は、 delegation（イベント委譲）を境界をまたいで組む際の必須知識です。バブリング・キャプチャの基本順序そのものは イベント伝播の内部動作 と同じで、Shadow DOM はそこに「境界で止まるか」「targetを付け替えるか」の二層を追加していると捉えると整理できます。基礎となるツリー構造は DOM を押さえておくと、light/shadow/flattened の三つの木の区別が明確になります。

まとめ