Что такое Shadow DOM в веб-разработке

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

Зачем нужен Shadow DOM?

Как использовать Shadow DOM

Создаётся через метод .attachShadow():

<div id="my-element"></div>

<script>
  const host = document.getElementById("my-element");
  const shadow = host.attachShadow({ mode: "open" });

  shadow.innerHTML = `
    <style>
      p { color: red; }
    </style>
    <p>Привет из Shadow DOM!</p>
  `;
</script>

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

Структура

• Custom Element — пользовательский HTML-тег (например, <my-modal>).
• Shadow Root — корень изолированного дерева.
• Shadow DOM Tree — содержимое компонента (внутренний HTML + стили).
• Light DOM — контент, переданный внутрь тега как обычные дети.

Пример с Web Component

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).innerHTML = `
      <style>p { color: blue; }</style>
      <p>Я в тени</p>
    `;
  }
}

customElements.define('my-element', MyElement);

Теперь в HTML:

<my-element></my-element>

Компонент отрисуется, но его стили не будут конфликтовать с внешними.

Когда использовать Shadow DOM?

Подходит для:

• Web Components (например, <my-button>, <user-card>)
• UI-библиотек со своими стилями (без конфликтов)
• Инкапсуляции логики и разметки

Не обязателен, если:

• Вы работаете в рамках фреймворков (React, Vue), которые решают изоляцию по-другому
• Компоненты не требуют строгой изоляции от внешнего CSS