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

Question

我想为元素创建一个影子 DOM，这样我就可以显示 Chrome 扩展的元素，而页面样式不会影响它们。

当我查看

Element.createShadowRoot

的文档时，我发现它已被弃用，所以我签出了

Element.attachShadow

。它说我必须提供一种封装模式，但没有解释不同模式的作用。我搜索了一下，但找不到任何可以清楚解释差异的内容。

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

Answer 1

使用

open

模式，您可以通过 HTML 元素的

shadowRoot

属性访问 Shadow DOM。

使用

closed

模式则不能。

shadowRoot

将会返回

null

。

您可以根据您想要实现的目标使用任一模式。

这里有差异的详细解释。

Answer 2

添加到已接受的答案中。 Shadow DOM 的封闭模式有一个好处，那就是为 Web 组件作者提供了灵活性来决定如何（如果有的话）公开组件的 Shadow Root。然而，绕过组件作者隐藏 Shadow Root 的任何努力是非常容易的，因此可能不值得打扰。 请参阅开放与封闭 Shadow DOM 以获取更详细的解释。