打开和关闭影子DOM封装模式有什么区别？ [英] What is the difference between open and closed shadow DOM encapsulation mode?

问题描述

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

I want to create a shadow DOM for an element so I can display elements for a Chrome extension without the page styles affecting them.

当我查看文档对于 Element.createShadowRoot 我看到它已被弃用，所以我签出了 Element.attachShadow 。它说我不得不提供封装模式，但没有解释什么是不同的模式。我搜索了一下，但是我无法找到任何明确解释区别的内容。

When I looked at the documentation for Element.createShadowRoot I saw it was deprecated so I checked out Element.attachShadow. It said I had to provide an encapsulation mode but did not explain what the different modes do. I searched a bit but I wasn't able to find anything clearly explaining what the difference was.

模式之间有什么区别？我试图实现？

What is the difference between the modes and which one should I use for what I am trying to achieve?

推荐答案

使用打开模式通过HTML元素的 shadowRoot 属性访问Shadow DOM。

With the open mode you can access the Shadow DOM via the shadowRoot property of the HTML element.

将关闭模式你不能。 shadowRoot 将返回 null 。

With the closed mode you cannot. shadowRoot will return null.

您可以同时使用您想要实现的模式。

You can use both modes for you want to achieve.

这是一个差异的详细解释。

这篇关于打开和关闭影子DOM封装模式有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！