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

Question

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

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

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

Answer 1

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

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

您可以使用这两种模式。

这是detailed explanation of the differences。

Answer 2

添加到接受的答案。 Shadow DOM的封闭模式具有单一的好处，即为Web组件作者提供灵活性来决定如何（如果有的话）公开组件的Shadow Root。然而，它非常容易规避组件作者隐藏暗影根的任何努力，因此它可能不值得打扰。 See Open vs. Closed Shadow DOM有更详细的解释。