开放式和封闭式 shadow DOM 封装模式有什么区别？答案

【问题标题】：What is the difference between open and closed shadow DOM encapsulation mode?开放式和封闭式 shadow DOM 封装模式有什么区别？
【发布时间】：2017-02-17 06:45:56
【问题描述】：

我想为一个元素创建一个影子 DOM，这样我就可以在不影响页面样式的情况下显示 Chrome 扩展的元素。

当我查看 Element.createShadowRoot 的文档时，我发现它已被弃用，因此我查看了 Element.attachShadow。它说我必须提供一种封装模式，但没有解释不同模式的作用。我搜索了一下，但找不到任何清楚地解释差异的东西。

这些模式之间有什么区别，我应该使用哪种模式来实现我想要实现的目标？

【问题讨论】：

这里很好地概述了实际差异（或缺乏差异）：blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af

标签： javascript html dom shadow-dom

【解决方案1】：

使用open 模式，您可以通过HTML 元素的shadowRoot 属性访问Shadow DOM。

使用closed 模式你不能。 shadowRoot 将返回 null。

你可以使用这两种模式来实现你想要的。

这是detailed explanation of the differences。

【讨论】：

Chrome 扩展有什么办法可以“打开”或操作关闭的影子 DOM？
@Pacerier 否，因为关闭模式意味着能够做到这一点。
这是否意味着我可以将整个页面包装在一个组件中，然后阻止用户扩展对其进行任何操作？
@SephReed chrome 扩展可以修改 attachShadow 函数，通过使用在“document_start”处注入的内容脚本来授予自身访问权限。
@Neolisk 已修复 :-)

【解决方案2】：

添加到接受的答案。 Shadow DOM 的封闭模式有一个好处，就是为 Web 组件作者提供了决定如何（如果有的话）公开组件的 Shadow Root 的灵活性。然而，绕过组件作者在隐藏 Shadow Root 方面所做的任何努力都非常容易，因此可能不值得打扰。 See Open vs. Closed Shadow DOM获取更详细的解释。

【讨论】：

首先，感谢您的回答和精彩的博文。我遇到了一个问题，我必须为 Selenium 测试用例访问封闭的 Shadow DOM，我需要打开它。你有一个工作示例来演示打开封闭的 Shadow DOM 的代码吗？我可以为该站点编写一个 Chrome 扩展程序并通过 Chrome 驱动程序添加它，以便在需要时打开它。
这并不完全正确。考虑到我们可以使用 Weakmap，如果小心使用，甚至可以使用闭包来隐藏对任何私有数据的访问，如果作者确实喜欢封装，那么如果不使用例如封装就不容易打开。 eval、exploit 或其他方法。