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

Question

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

当我查看文档时,Element.createShadowRoot我看到它已被弃用,所以我检查了一下Element.attachShadow.它说我必须提供封装模式,但没有解释不同模式的作用.我搜索了一下,但我无法找到任何清楚解释有什么区别的东西.

模式之间有什么区别,我应该使用哪一种模式来实现？

Answer 1

使用该open模式,您可以通过shadowRootHTML元素的属性访问Shadow DOM .

使用这种closed模式你不能.shadowRoot会回来的null.

您可以使用两种模式来实现.

这是对差异的详细解释.

Answer 2

添加到已接受的答案中。Shadow DOM 的封闭模式具有唯一的好处，即为 Web 组件作者提供了决定如何（如果有的话）公开组件的 Shadow Root 的灵活性。然而，绕过组件作者在隐藏 Shadow Root 方面所做的任何努力非常容易，因此可能不值得打扰。有关更详细的说明，请参阅 Open vs. Closed Shadow DOM。