В чем разница между открытым и закрытым тензодатчиком теней DOM?

Я хочу создать теневую DOM для элемента, чтобы я мог отображать элементы для расширения Chrome без стилей страниц, влияющих на них.

Когда я посмотрел документацию на Element.createShadowRoot, я увидел, что она устарела, поэтому я проверил Element.attachShadow. Он сказал, что мне нужно предоставить режим инкапсуляции, но не объяснил, что делают разные режимы. Я немного искал, но я не смог найти ничего, объясняющего, в чем разница.

В чем разница между режимами и какой из них я должен использовать для достижения того, чего я пытаюсь достичь?

Ответ 1

В режиме open вы можете получить доступ к Shadow DOM с помощью свойства shadowRoot элемента HTML.

В режиме closed вы не можете. shadowRoot вернет null.

Вы можете использовать оба режима, которые вы хотите достичь.

Вот подробное объяснение различий.

Ответ 2

Чтобы добавить к принятому ответу. Закрытый режим Shadow DOM имеет единственное преимущество, которое должно предоставить авторам веб-компонентов гибкость, чтобы решить, как (если вообще) выставить теневой корень компонента. Тем не менее, невероятно легко обойти любые усилия, которые автор компонента делает, скрывая Теневой Корень, поэтому, вероятно, это не стоит беспокоиться. Подробнее см. в разделе Open vs. Closed Shadow DOM.