В чем разница между открытым и закрытым теневым режимом инкапсуляции DOM?
Я хочу создать теневой DOM для элемента, чтобы я мог отображать элементы для расширения Chrome, не затрагивая стили страниц.
Когда я посмотрел на документацию для Element.createShadowRoot Я видел, что это устарело, поэтому я проверил Element.attachShadow, Он сказал, что я должен был предоставить режим инкапсуляции, но не объяснил, что делают разные режимы. Я немного искал, но не смог найти ничего, что бы объясняло разницу.
В чем разница между режимами и какой из них мне следует использовать для того, чего я пытаюсь достичь?
2 ответа
С open В режиме вы можете получить доступ к Shadow DOM через shadowRoot свойство элемента HTML.
С closed Режим вы не можете. shadowRoot вернусь null,
Вы можете использовать оба режима для достижения желаемого.
Добавить к принятому ответу. Закрытый режим Shadow DOM имеет единственное преимущество, заключающееся в том, чтобы предоставить авторам веб-компонентов возможность решать, как (если вообще нужно) предоставлять Shadow Root компонента. Тем не менее, невероятно легко обойти любые усилия, прилагаемые автором компонента для сокрытия Shadow Root, так что, вероятно, это не стоит беспокоить. Смотрите Open против Closed Shadow DOM для более подробного объяснения.