Що таке shadow DOM у веб-розробці

Shadow DOM — це технологія браузера, яка дозволяє створювати інкапсульовані дерева DOM всередині елементів.

Вона ізолює HTML, CSS та JS, щоб уникнути конфліктів з зовнішніми стилями та скриптами сторінки.

Чому Shadow DOM?

Інкапсуляція

Усе всередині Shadow DOM не доступне безпосередньо ззовні: ні CSS стилі, ні JS код ззовні не впливають на внутрішню структуру компонент.

Ізоляція стилів

Стилі, написані в Shadow DOM, не просочуються назовні, і навпаки — зовнішні стилі не впливають на внутрішню структуру компонент.

Чистота компонент

Shadow DOM робить Web Components більш надійними та незалежними від зовнішнього середовища.

Як використовувати Shadow DOM

Створюється за допомогою методу .attachShadow():

html

<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>Hello from Shadow DOM!</p>
  `;
</script>

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

Структура

DOM

Custom Element

Shadow Root

Shadow DOM Tree

Light DOM (вміст за замовчуванням)

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>I'm in shadow</p>
    `;
  }
}

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

Тепер в HTML:

html

<my-element></my-element>

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

Коли використовувати Shadow DOM?

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

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

Необхідно, якщо:

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

Висновок:

Shadow DOM — це спосіб створення ізольованих, безпечних компонентів з власними стилями та структурою. Це основа Web Components і використовується для досягнення інкапсуляції та повторного використання UI.

Зміст

Чому Shadow DOM? Як використовувати Shadow DOM Структура Приклад Web Component Коли використовувати Shadow DOM?

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань