javascript七基础学习系列一千四百八十四：影子DOM

概念上讲，影子DOM（shadow DOM） Web 组件相当直观，通过它可以将一个完整的DOM 树作为
节点添加到父DOM 树。这样可以实现DOM 封装，意味着CSS 样式和CSS 选择符可以限制在影子DOM
子树而不是整个顶级DOM树中。
影子DOM 与HTML 模板很相似，因为它们都是类似document 的结构，并允许与顶级DOM 有一
定程度的分离。不过，影子DOM 与HTML 模板还是有区别的，主要表现在影子DOM的内容会实际渲
染到页面上，而HTML 模板的内容不会。
理解影子DOM
假设有以下HTML 标记，其中包含多个类似的DOM 子树：

Make me red!

Make me blue!

Make me green!

从其中的文本节点可以推断出，这3 个DOM子树会分别渲染为不同的颜色。常规情况下，为了给每个子树应用唯一的样式，又不使用style 属性，就需要给每个子树添加一个唯一的类名，然后通过 相应的选择符为它们添加样式：

Make me red!

Make me green!

Make me blue!

当然，这个方案也不是十分理想，因为这跟在全局命名空间中定义变量没有太大区别。尽管知道这 些样式与其他地方无关，所有CSS 样式还会应用到整个DOM。为此，就要保持CSS 选择符足够特别， 以防这些样式渗透到其他地方。但这也仅是一个折中的办法而已。理想情况下，应该能够把CSS 限制在 使用它们的DOM上：这正是影子DOM最初的使用场景。 创建影子DOM 考虑到安全及避免影子DOM 冲突，并非所有元素都可以包含影子DOM。尝试给无效元素或者已 经有了影子DOM的元素添加影子DOM会导致抛出错误。 以下是可以容纳影子DOM的元素。  任何以有效名称创建的自定义元素（参见HTML 规范中相关的定义） 





 

















 





 影子DOM 是通过attachShadow()方法创建并添加给有效HTML 元素的。容纳影子DOM 的元素 被称为影子宿主（shadow host）。影子DOM的根节点被称为影子根（shadow root）。 attachShadow()方法需要一个shadowRootInit 对象，返回影子DOM的实例。shadowRootInit 对象必须包含一个mode 属性，值为"open"或"closed"。对"open"影子DOM的引用可以通过shadowRoot 属性在HTML 元素上获得，而对"closed"影子DOM 的引用无法这样获取。 下面的代码演示了不同mode 的区别： document.body.innerHTML = `

`; const foo = document.querySelector('#foo'); const bar = document.querySelector('#bar'); const openShadowDOM = foo.attachShadow({ mode: 'open' }); const closedShadowDOM = bar.attachShadow({ mode: 'closed' }); console.log(openShadowDOM); // #shadow-root (open) console.log(closedShadowDOM); // #shadow-root (closed) console.log(foo.shadowRoot); // #shadow-root (open) console.log(bar.shadowRoot); // null 一般来说，需要创建保密（closed）影子DOM 的场景很少。虽然这可以限制通过影子宿主访问影 子DOM，但恶意代码有很多方法绕过这个限制，恢复对影子DOM 的访问。简言之，不能为了安全而 创建保密影子DOM。