Shadow DOM は理解するのが難しいトピックです。複雑なだけです。ウェブでは馴染みのないコンセプトが導入されています。シャドウ境界、スタイル設定スコープ、イベント リターゲティング、挿入ポイント、シャドウ挿入ポイント、ホストノード、分散ノードなど、専門用語は枚挙にいとまがありません。
Shadow DOM の概念的に難しい点の 1 つは、最終的なプロダクト（DOM）がブラウザによってレンダリングされる方法です。ホストノードのノードは、ShadowRoot の挿入ポイントに魔法のようにスウィズルされますが、論理的にはホストノード内に残ります。変ですね。そのため、レンダリング時に、元のホストではなくシャドウ ツリーの一部として表示されます。このレンダリングがどのように行われるかは、Shadow DOM で最も混乱する部分の 1 つです。
数日前、学習曲線を短縮するために、開発を進めていたツール「Shadow DOM Visualizer」をリリースしました。
これにより、Shadow DOM がブラウザでどのようにレンダリングされるかを視覚的に確認できます。これは、現在の DevTools に欠けている機能です。左側の黒いコードブロックはどちらも編集可能です。<content> の挿入ポイントを変更したり、削除したり、新たに追加したりして、右側の合成（レンダリング）されたツリーにどのような影響があるかを確認します。
グラフ内のノードにカーソルを合わせると、左側に関連するマークアップがハイライト表示されます。d3.js のおかげで、青色のノードはホストノードから送信されます。黄色のノードは Shadow DOM から取得されます。<content> 挿入ポイントは、2 つの世界をつなぐ橋です。論理的には Shadow DOM 内にあるため、黄色で表示されます。青い枠線は、青いホストノードをレンダリング パーティに招待していることを示します。
Shadow DOM は Chrome 25 で、<template> 要素は Chrome 26 で利用できます（ただし、デモを試すには前者のみが必要です）。