open和closed shadowDOM封装方式有什么区别？
What is the difference between open and closed shadow DOM encapsulation mode?
我想为元素创建阴影 DOM，这样我就可以显示 Chrome 扩展的元素，而不会受到页面样式的影响。
当我查看 Element.createShadowRoot 的文档时，我发现它已被弃用，所以我查看了 Element.attachShadow。它说我必须提供一种封装模式，但没有解释不同模式的作用。我搜索了一下，但没能找到任何可以清楚地解释差异的内容。
模式之间有什么区别，我应该使用哪种模式来实现我想要实现的目标？
使用 open 模式，您可以通过 HTML 元素的 shadowRoot 属性 访问阴影 DOM。
使用 closed 模式则不能。 shadowRoot 将 return null.
您可以使用两种模式来实现您想要的效果。
添加到已接受的答案中。 Shadow DOM 的封闭模式有一个好处，那就是为 Web 组件作者提供了灵活性来决定如何（如果有的话）暴露组件的 Shadow Root。然而，绕过组件作者在隐藏 Shadow Root 方面所做的任何努力非常容易，因此可能不值得费心。 See Open vs. Closed Shadow DOM 以获得更详细的解释。
我想为元素创建阴影 DOM，这样我就可以显示 Chrome 扩展的元素，而不会受到页面样式的影响。
当我查看 Element.createShadowRoot 的文档时，我发现它已被弃用，所以我查看了 Element.attachShadow。它说我必须提供一种封装模式，但没有解释不同模式的作用。我搜索了一下，但没能找到任何可以清楚地解释差异的内容。
模式之间有什么区别，我应该使用哪种模式来实现我想要实现的目标？
使用 open 模式，您可以通过 HTML 元素的 shadowRoot 属性 访问阴影 DOM。
使用 closed 模式则不能。 shadowRoot 将 return null.
您可以使用两种模式来实现您想要的效果。
添加到已接受的答案中。 Shadow DOM 的封闭模式有一个好处，那就是为 Web 组件作者提供了灵活性来决定如何（如果有的话）暴露组件的 Shadow Root。然而，绕过组件作者在隐藏 Shadow Root 方面所做的任何努力非常容易，因此可能不值得费心。 See Open vs. Closed Shadow DOM 以获得更详细的解释。