Shadow DOM 是一个令人头疼不已的话题。真是太复杂了。它会引入一些我们不曾在网络上熟悉的陌生概念。阴影边界、样式范围、事件重访定位、插入点、阴影插入点、主机节点、分布式节点...一直以来都是行话。
从概念上讲，Shadow DOM 存在一些问题，那就是浏览器对最终产品 (DOM) 的渲染方式。来自主机节点的节点被魔法调配到 ShadowRoot 的插入点中，但在逻辑上仍会保留在主机节点中。奇怪！因此，在渲染时，它们显示为影子树的一部分，而非原始宿主。这种渲染是如何发生的，是 Shadow DOM 最令人困惑的部分之一。
几天前，我发布了一款自己一直在开发的工具，名为 Shadow DOM Visualizer，以帮助缩短学习过程。
它可以让您直观地看到 Shadow DOM 在浏览器中的渲染效果，而目前开发者工具还没有此功能。左侧两个黑色代码块均可修改。请尝试更改 <content> 插入点、移除或添加新插入点，看看右侧合成（渲染）树受到的影响。
将鼠标悬停在图表中的节点上，突出显示左侧的相关标记。太棒了，使用 d3.js！蓝色节点来自主机节点。黄色节点来自 Shadow DOM。<content> 插入点是两个世界之间的桥梁。因为它们在逻辑上位于 Shadow DOM 中，所以显示为黄色。其蓝色边框表示他们邀请蓝色主机节点加入渲染派对。
Chrome 25 中提供了 Shadow DOM，而在 Chrome 26 中则提供了 <template> 元素（不过，您只需首先试用演示版即可）。