Shadow DOM — это веб-стандарт, позволяющий инкапсулировать DOM-дерево и стили внутри компонента, изолируя их от остальной части документа.
Основные концепции:
- Shadow tree: Собственное DOM-дерево, прикрепленное к элементу.
- Shadow boundary: Граница, отделяющая Shadow DOM от основного документа.
- Shadow host: Элемент, к которому прикреплен Shadow DOM.
- Shadow root: Корневой узел Shadow tree.
Преимущества:
- Изоляция стилей: Стили, определенные внутри Shadow DOM, не влияют на элементы вне его, и наоборот.
- Изоляция DOM: DOM-структура внутри Shadow DOM не видна и не доступна напрямую из основного документа, что предотвращает конфликты id и классов.
- Инкапсуляция: Создает модульные, многоразовые компоненты.
Создание Shadow DOM:
javascript