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添加样式（例如在