直观呈现 Shadow DOM 概念

Shadow DOM 是一个难以理解的主题。只是比较复杂。它引入了我们在网络上不熟悉的概念。阴影边界、样式作用域、事件再定位、插入点、阴影插入点、主机节点、分布式节点...术语不胜枚举。

Shadow DOM 在概念上比较难理解的一个方面是浏览器呈现最终产品 (DOM) 的方式。来自宿主节点的节点会神奇地转换为 ShadowRoot 的插入点，但在逻辑上仍保留在宿主节点中。真奇怪！因此，在渲染时，它们会显示为阴影树的一部分，而不是原始主机的一部分。此渲染过程是 Shadow DOM 中最令人困惑的部分之一。

几天前，我发布了一款名为 Shadow DOM Visualizer 的工具，旨在缩短学习曲线。

借助该工具，您可以直观地查看 Shadow DOM 在浏览器中的呈现方式，这是目前开发者工具所缺乏的功能。左侧的两个黑色代码块均可修改。尝试更改 <content> 插入点、移除或添加新的插入点，看看右侧的复合（呈现）树会受到什么影响。

将鼠标悬停在图表中的节点上，即可在左侧突出显示相关标记。d3.js 真棒！蓝色节点来自主机节点。黄色节点来自 Shadow DOM。<content> 插入点是这两个世界的桥梁。由于它们在逻辑上位于 Shadow DOM 中，因此颜色为黄色。蓝色边框表示它们会邀请蓝色主机节点加入渲染方。

Shadow DOM 在 Chrome 25 中提供，<template> 元素在 Chrome 26 中提供（不过，您只需使用前者即可试用演示版）。