Що таке Shadow DOM?

JavaScriptMiddle~2 хв читання

Визначення

Shadow DOM - це ізольоване дерево DOM-елементів, вкладене всередину елемента, але недоступне напряму з основного (light) DOM.

Простіше кажучи: Shadow DOM - це "міні-DOM усередині елемента", зі своїми тегами, стилями й логікою, який не впливає на решту документа і сам не підвладний його стилям.

Приклад без Shadow DOM

javascript

<div class="card">
  <h2>Профіль</h2>
  <button>Додати</button>
</div>

Якщо на сторінці є CSS:

javascript

button {
  background: red;
}

Усі кнопки стануть червоними - навіть усередині карток, навіть у компонентах, де це небажано. Тобто стилі "протікають" всередину.

1. Що робить Shadow DOM

Shadow DOM вирішує цю проблему:

створює інкапсульований DOM (внутрішню структуру);
обмежує дію зовнішніх CSS;
захищає внутрішні елементи компонента від змін ззовні.

2. Приклад створення Shadow DOM

javascript

<div id="host"></div>

<script>
  const host = document.querySelector('#host');
  const shadow = host.attachShadow({ mode: 'open' });

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

На сторінці ти побачиш синій текст "Привіт із Shadow DOM!", але якщо в глобальних стилях прописано:

javascript

p { color: red; }

цей стиль не вплине на текст усередині Shadow DOM.

3. Види режиму Shadow DOM

javascript

element.attachShadow({ mode: 'open' });

Режим	Що означає
`"open"`	До тіньового дерева можна звертатися через `element.shadowRoot`
`"closed"`	Доступ заборонено, `shadowRoot` буде `null`

Приклад:

javascript

const root = el.attachShadow({ mode: 'open' });
console.log(el.shadowRoot); // є доступ

const root2 = el.attachShadow({ mode: 'closed' });
console.log(el.shadowRoot); // null

4. Структура: Light DOM vs Shadow DOM

javascript

<body>
  <my-button> <!-- хост -->
    #shadow-root
      <button>Клік</button>
  </my-button>
</body>

Елемент <my-button> - це host (власник shadow-дерева). Те, що всередині #shadow-root, - ізольований Shadow DOM.

5. Shadow DOM у дії (міні-компонент)

javascript

<template id="my-button">
  <style>
    button {
      background: dodgerblue;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
    }
  </style>
  <button>Натисни мене</button>
</template>

<script>
  class MyButton extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const tmpl = document.getElementById('my-button').content.cloneNode(true);
      shadow.appendChild(tmpl);
    }
  }

  customElements.define('my-button', MyButton);
</script>

<my-button></my-button>

Вийшов справжній веб-компонент:

можна вставляти на будь-яку сторінку;
у нього своя розмітка й стилі;
глобальні стилі його не ламають.

6. Переваги Shadow DOM

Перевага	Опис
Інкапсуляція	Внутрішні стилі й DOM ізольовані від зовнішнього світу
Передбачуваність	Стилі не "протікають" всередину і назовні
Повторне використання	Можна створювати компоненти для повторного використання
Продуктивність	Менше перерахунків стилів для ізольованих ділянок
Безпека	Не можна випадково змінити внутрішню розмітку компонента

7. Де використовується Shadow DOM

У вбудованих HTML-елементах:

<video>
<audio>
<input type="range">
<details> / <summary>

Якщо відкрити DevTools і увімкнути "Show user agent shadow DOM", ти побачиш усередині них приховані елементи (кнопки, слайдери тощо).

У Web Components - усі сучасні бібліотеки (Lit, Stencil, Vue 3 Custom Elements, Ionic, Shoelace) використовують Shadow DOM під капотом.

8. Взаємодія з Shadow DOM

З основного DOM усередину

Можна передавати контент за допомогою <slot>:

javascript

<my-card>
  <h2 slot="title">Заголовок</h2>
</my-card>

javascript

<!-- усередині Shadow DOM -->
<slot name="title"></slot>

Це механізм "вставки вмісту" в компонент.

Підсумок

Поняття	Опис
Shadow DOM	Ізольоване дерево елементів усередині компонента
Host	Елемент, усередині якого створено Shadow DOM
Light DOM	Звичайна частина документа
Інкапсуляція	Стилі й DOM не впливають одне на одного
Використовується для	Web Components, ізоляції стилів, вбудованих елементів

Запам'ятай просто: Shadow DOM - це "міні-всесвіт усередині елемента", де в тебе свій DOM, свої стилі і жодного конфлікту з зовнішнім світом.

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

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

Premium

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