shadow DOM不是超级英雄电影中的恶棍，也不是DOM的黑暗面。 shadow DOM只是一种解决文档对象模型（或简称DOM）中缺少的树封装方法。 网页通常使用来自外部源的数据和小部件，如果它们没有封装，那么样式可能会影响HTML中不必要的部分，迫使开发人员使用特定的选择器和!important 规则来避免样式冲突。 尽管如此，在编写大型程序时，这些努力似乎并不是那么有效，并且大量的时间被浪费在防止CSS和JavaScript的冲突上。 Shadow DOM API旨在通过提供封装DOM树的机制来解决这些问题。 Shadow DOM是用于创建Web组件的主要技术之一，另外两个是自定义元素和HTML模板。 Web 组件的规范最初是由Google提出的，用于简化Web小部件的开发。 虽然这三种技术旨在协同工作，不过你可以自由地分别使用每种技术。本教程的范围仅限于shadow DOM。 什么是DOM？ 在深入研究如何创建shadow DOM之前，了解DOM是什么非常重要。 W3C文档对象模型（DOM）提供了一个平台和语言无关的应用程序编程接口（API），用于表示和操作存储在HTML和XML文档中的信息。 通过使用DOM，程序员可以访问、添加、删除或更改元素和内容。 DOM将网页视为树结构，每个分支以节点结束，每个节点包含一个对象，可以使用JavaScript等脚本语言对其进行修改。 考虑以下HTML文档： Sample document Heading Link 此图中所有的框都是节点。 用于描述DOM部分的术语类似于现实世界中的家谱树： 给定节点上一级节点是该节点的父节点 给定节点下一级节点是该节点的子节点 具有相同父级的节点是兄弟节点 给定节点上方的所有节点（包括父节点和祖父节点）都称为该节点的祖先 最后，给定节点下所有的节点都被称为该节点的后代 节点的类型取决于它所代表的HTML元素的类型。 HTML标记被称为元素节点。嵌套标签形成一个元素树。元素中的文本称为文本节点。文本节点可能没有子节点，你可以把它想象成是一棵树的叶子。 为了访问树，DOM提供了一组方法，程序员可以用这些方法修改文档的内容和结构。例如当你写下document.createElement('p');时，就在使用DOM提供的方法。没有DOM，JavaScript就无法理解HTML和XML文档的结构。 下面的JavaScript代码显示了如何使用DOM方法创建两个HTML元素，将一个嵌套在另一个内部并设置文本内容，最后把它们附加到文档正文： const section = document.createElement('section'); const p = document.createElement('p'); p.textContent […]