shadow DOM理解

custom DOM

首先要知道custom DOM (文档对象模型) ，它是不同的元素节点、文本节点连接而成的一个树状结构，应用于标记文档中（例如 web文档中经常用到的HTML文档）。
可以简单理解为html页面

Shadow DOM

Shadow DOM允许将隐藏的DOM树添加到常规的DOM树中——它以shadow root为起始根节点，在这个根节点的下方，可以是任意元素，和普通的DOM元素一样。你可以使用同样的方式来操作Shadow DOM，就和操作常规DOM一样——例如添加子节点、设置属性，以及为节点添加自己的样式（例如通过 element.style.foo属性），或者为整个 Shadow DOM添加样式（例如在<style>元素内添加样式）。不同的是，Shadow DOM内部的元素始终不会影响到它外部的元素，这为封装提供了便利。

Shadow DOM允许将隐藏的DOM树添加到常规的DOM树中——它以shadow root为起始根节点，在这个根节点的下方，可以是任意元素，和普通的DOM元素一样。

Shadow DOM 结构

• Shadow host： 一个常规 DOM节点，Shadow DOM会被添加到这个节点上。
• Shadow tree：Shadow DOM内部的DOM树。
• Shadow boundary：Shadow DOM结束的地方，也是常规 DOM开始的地方。
• Shadow root: Shadow tree的根节点。

扩展

以一个有着默认播放控制按钮的元素为例。你所能看到的只是一个 标签，实际上，在它的Shadow DOM中，包含来一系列的按钮和其他控制器。Shadow DOM标准允许你为你自己的元素（custom element）维护一组 Shadow DOM。

参考：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM