Shadow DOM — это технология, являющаяся частью спецификации Web Components, которая позволяет создавать инкапсулированную, то есть изолированную структуру DOM внутри веб-компонента. Это своего рода «теневой» DOM, который скрыт от основного документа и не влияет на него, и наоборот. Shadow DOM помогает создавать модульные, безопасные и повторно используемые пользовательские интерфейсные элементы.

Как это работает?

В обычном HTML-документе все элементы входят в одно общее дерево DOM, и стили или JavaScript-обработчики событий могут повлиять на любой его участок. Однако когда используется Shadow DOM, компонент получает собственное DOM-дерево, отдельное от основного, со своими стилями и логикой, которые не затрагивают остальной интерфейс.

Shadow DOM гарантирует, что внутренняя структура и стили компонента не будут случайно переопределены или нарушены внешним кодом. Это делает компоненты более устойчивыми и предсказуемыми.

Преимущества Shadow DOM

• Изоляция стилей: CSS внутри компонента применяется только к элементам этого компонента и не «протекает» наружу.
• Изоляция структуры: Внешние скрипты не могут напрямую изменить внутреннюю структуру компонента.
• Повторное использование: Один и тот же компонент можно использовать в разных проектах без риска конфликтов.
• Стабильность UI: Компоненты не влияют друг на друга и работают независимо.

Простой пример (на JavaScript):

const host = document.querySelector("#my-component");

const shadowRoot = host.attachShadow({ mode: "open" });

shadowRoot.innerHTML = `

<style>

p {

color: red;

}

</style>

<p>Это текст внутри Shadow DOM</p>

`;

В этом примере создается Shadow DOM для определённого элемента и внутрь него добавляется стиль и HTML-контент. Стили, применённые к <p>, не будут влиять на элементы вне Shadow DOM, и наоборот.

Открытый и закрытый режим

Shadow DOM может быть создан в двух режимах:

• mode: "open" — тень можно получить через JavaScript (element.shadowRoot).
• mode: "closed" — доступ к тени через JavaScript невозможен, компонент остаётся полностью изолированным.

Где используется?

Shadow DOM активно используется при создании кастомных веб-компонентов, таких как собственные date-picker, modal, tabs, dropdown и другие элементы интерфейса. Он помогает разработчикам строить автономные элементы, которые не ломаются от внешних стилей или скриптов.

Заключение

Shadow DOM — это ключевая технология для создания модульных, изолированных и многоразовых интерфейсных компонентов. Он обеспечивает чистоту, стабильность и удобство сопровождения фронтенд-кода, особенно в масштабных приложениях.