Shadow DOM позволяет инкапсулировать HTML и CSS в веб-компонентах, скрывая их детали реализации и стили от основного документа, тем самым предотвращая конфликты имен и стилей.
Создание Shadow DOM:
Для добавления Shadow DOM к элементу, используйте метод attachShadow({mode: 'open' | 'closed'}) на целевом элементе. Режим open позволяет доступ к Shadow DOM из основного документа через свойство shadowRoot, в то время как closed делает Shadow DOM полностью инкапсулированным.
let host = document.createElement('div');
let shadowRoot = host.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<style>:host { color: red; }</style><b>I am in shadow dom!</b>';
document.body.appendChild(host);
Стилизация Shadow DOM:
- Стили внутри Shadow DOM инкапсулированы и не влияют на основной документ, а стили основного документа не влияют на содержимое Shadow DOM.
- Селектор `:host` используется для стилизации корневого элемента Shadow DOM.
- Глобальные стили не проникают в Shadow DOM, но переменные CSS (**`var()`**) и кастомные свойства могут быть использованы для тематизации.
Слоты:
Слоты (<slot>) — это элементы в Shadow DOM, которые определяют места для вставки пользовательского контента из основного DOM. Слоты могут иметь имена (name атрибут), позволяя детально управлять распределением контента.
<!-- В Shadow DOM -->
<slot name="title"></slot>
<slot></slot> <!-- default slot -->
<!-- В основном DOM -->
<div slot="title">This goes into the named slot</div>
<div>This goes into the default slot</div>
Взаимодействие с Shadow DOM:
- Доступ к элементам внутри Shadow DOM возможен через `shadowRoot`, если режим установлен в `open`.
- Изоляция Shadow DOM обеспечивает инкапсуляцию, но также требует использования специфичных методов для взаимодействия с ним, особенно в случае `closed` режима.
#shadowdom #html #JavaScript