Shadow DOM は、頭を悩ませるのが難しいトピックです。ただ複雑ですウェブでは馴染みのない馴染みのない概念が導入されています。シャドウ境界、スタイル設定のスコープ、イベントのリターゲティング、挿入ポイント、シャドウ挿入ポイント、ホストノード、分散ノードなど、専門用語は増え続けています。
コンセプト上、Shadow DOM の大きな負担となるのは、最終製品（DOM）がブラウザによってレンダリングされる方法です。ホストノードのノードは、魔法のように ShadowRoot の挿入ポイントに組み込まれますが、論理的には依然としてホストノードに残ります。おかしい！そのため、レンダリング時に、元のホストではなくシャドウツリーの一部として表示されます。このレンダリングがどのように行われるのかは、Shadow DOM の中でも特にわかりにくい部分の一つです。
数日前に、Shadow DOM Visualizer という、これまで開発してきたツールがリリースされ、習得に時間がかからなくなりました。
これにより、現在の DevTools にはない Shadow DOM のレンダリングをブラウザで視覚的に確認できます。左側の黒いコードブロックはどちらも編集できます。<content> の挿入ポイントを変更、削除、または追加して、右側の合成（レンダリングされた）ツリーへの影響を確認してください。
グラフ内のノードにカーソルを合わせると、左側で関連するマークアップがハイライト表示されます。d3.js では、青いノードはホストノードから接続しています。黄色のノードは Shadow DOM から出たものです。<content> 挿入ポイントは、2 つの世界の間の架け橋です。これらは論理的に Shadow DOM 内にあるため、黄色で色付けされています。青い枠線は、青いホストノードをレンダリング パーティに招待することを示します。
Shadow DOM は Chrome 25 で利用可能で、<template> 要素は Chrome 26 で利用できます（ただし、このデモを最初に試す必要があるのはこれだけです）。