Что такое Shadow DOM?

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

Зачем нужен

Стили и разметка компонента не «протекают» наружу и не ломаются внешними стилями. Это даёт настоящую инкапсуляцию — как в нативных элементах (<video>, <input type="range"> уже используют Shadow DOM).

Как работает

К элементу прикрепляется shadow root — отдельное поддерево DOM:

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>p { color: red; }</style>
      <p>Изолированный контент</p>
    `;
  }
}
customElements.define('my-card', MyCard);

Стиль p { color: red } внутри shadow не влияет на <p> снаружи, и наоборот.

Понятия

• Shadow host — элемент, к которому прикреплён shadow.
• Shadow root — корень изолированного дерева.
• mode: 'open'/'closed' — доступен ли shadow root снаружи через element.shadowRoot.
• `<slot>` — точки вставки внешнего контента.

Коротко для собеседования

Shadow DOM — изолированное поддерево DOM и стилей внутри элемента (веб-компоненты). Стили не протекают ни внутрь, ни наружу. Создаётся через attachShadow, контент вставляется через <slot>. Даёт настоящую инкапсуляцию компонентов.