Как веб-компоненты и Shadow DOM предотвращают утечку CSS между компонентами?

Question

В 2008 году наша команда исследовала GWT - технологию написания веб-компонентов для Javascript на Java, которая компилируется.

Новый член команды сказал:

У вас будут проблемы с CSS компонента и с конфликтом страниц между собой.

Оказалось, он был прав.

Сегодня я разговаривал с другом о Веб-компонентах .Я спросил его, как вы останавливаете CSS страницы и компоненты, конфликтующие друг с другом.

Он сказал:

С веб-компонентами и Shadow DOM все под контролем.Это решает проблему дырявого CSS.

Мой вопрос: Как веб-компоненты и Shadow DOM предотвращают утечку CSS между компонентами?

Answer 1

Поскольку Shadow DOM был разработан точно для решения проблем, возникающих при разработке веб-компонентов, как указано Google во введении к Shadow DOM :

Изолированный DOM: DOM компонента является автономным (например, document.querySelector () не будет возвращать узлы в теневом DOM компонента).

Ограниченный CSS: CSS, определенный в теневом DOM, ограничен этим. Правила стилей не просачиваются, а стили страниц не кровоточат.

Упрощает CSS - Scoped DOM означает, что вы можете использовать простые селекторы CSS, более общие имена идентификаторов / классов и не беспокоиться о конфликтах имен.

Это достигается с помощью CSS Scoping с введением нового отдельного дерева DOM, называемого Shadow DOM , которое будет локально заменять исходное DOM, называемое Light DOM .