Shadow DOM - это веб-стандарт, позволяющий инкапсулировать HTML, CSS и JavaScript в отдельные, изолированные от основного документа блоки.
Основные концепции:
- Shadow Host: Элемент DOM, к которому прилагается Shadow DOM.
- Shadow Tree: Изолированное поддерево DOM.
- Shadow Boundary: Граница между Shadow DOM и основным документом.
- Shadow Root: Корневой узел Shadow Tree. Создается с помощью
element.attachShadow({ mode: 'open' | 'closed' }):
open: Shadow Root доступен извне через element.shadowRoot.closed: Shadow Root не доступен извне.
Преимущества:
- Инкапсуляция стилей: Стили, определенные в Shadow DOM, не просачиваются наружу и не влияют на основной документ. Стили из основного документа по умолчанию не влияют на Shadow DOM, но это можно контролировать.
- Инкапсуляция DOM: Элементы внутри Shadow DOM не видны в основном DOM-дереве, что предотвращает случайное пересечение селекторов и манипуляций.
- Инкапсуляция поведения: Логика и обработчики событий могут быть изолированы в Shadow DOM.
Пример создания Shadow DOM:
javascript
Применение:
- Создание переиспользуемых веб-компонентов.
- Изоляция стилей сторонних библиотек.
- Защита внутренних деталей компонента от внешнего вмешательства.
Особенности работы со стилями:
- Внешние стили по умолчанию не влияют на Shadow DOM.
- 可以用
:host псевдо-класс для стилизации самого Shadow Host изнутри Shadow DOM.
- 可以使用
:host-context() для стилизации на основе контекста Shadow Host.
- 可以使用
::slotted() псевдо-элемент для стилизации элементов, помещенных в слоты ( <slot> ).
html
javascript
Shadow DOM является частью спецификации Web Components.