Shadow DOM проти DOM
1. Визначення
| Тип | Що це таке |
|---|---|
| Звичайний (Light) DOM | Це "основне" дерево HTML-документа - все, що ти пишеш у HTML і бачиш у DevTools. |
| Shadow DOM | Це вкладене, ізольоване DOM-дерево всередині елемента (компонента), яке має власні стилі, розмітку і поведінку, і не впливає на зовнішній документ. |
Тобто:
Light DOM - це "поверхня сайту", Shadow DOM - "нутрощі компонента", приховані від решти світу.
2. Приклад різниці
Звичайний DOM
<div class="card">
<h2>Заголовок</h2>
<button>Клік</button>
</div>Все видно в основному DOM, можна дістати через document.querySelector('button').
Глобальні стилі впливають на все (button { color: red; } зробить кнопку червоною).
Shadow DOM
const card = document.querySelector('.card');
const shadow = card.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
button { color: blue; }
</style>
<button>Внутрішній</button>
`;Тепер у card є внутрішній Shadow DOM, який:
- ізольований від зовнішніх стилів,
- не видно в основному DOM (якщо
mode: 'closed'), - керує власними елементами.
Глобальні стилі не зможуть перефарбувати кнопку з blue → red,
тому що вона живе у своєму Shadow-дереві.
3. Ключові відмінності
| Характеристика | Звичайний DOM (Light) | Shadow DOM |
|---|---|---|
| Де живе | У дереві документа | Всередині "host"-елемента |
| Видно в DevTools | Так | Так (але приховано за замовчуванням, можна ввімкнути "Show user agent shadow DOM") |
| Стилізація | Підпорядковується глобальному CSS | Ізольований від глобальних стилів |
| Ізоляція | Немає - стилі і JS впливають одне на одне | Повна - ізольований контекст |
| Використовується в | Будь-якому HTML | Web Components, вбудованих елементах (<video>, <input> та ін.) |
| Взаємодія | Пряма через document.querySelector() | Тільки через shadowRoot.querySelector() |
| Slots | Немає | Є (<slot> для вставки вмісту з Light DOM) |
4. Візуально
<body>
<my-card> ← host-елемент
#shadow-root (shadow DOM)
<style>...</style>
<button>Click</button>
#light-dom (звичайний DOM)
<p slot="content">...</p>
</my-card>
</body>my-card - елемент-хост
#shadow-root - його внутрішній Shadow DOM
Зовнішні елементи можуть передавати контент усередину через <slot>.
5. Приклад взаємодії
Light DOM бачить тільки "оболонку":
console.log(document.querySelector('my-card').innerHTML);
// Порожньо, тому що нутрощі сховані в Shadow DOMShadow DOM доступний тільки через посилання:
const shadow = document.querySelector('my-card').shadowRoot;
console.log(shadow.querySelector('button')); // <button>Click</button>6. Застосування Shadow DOM
Використовується, коли потрібно:
- Інкапсулювати компонент (веб-компоненти, UI-бібліотеки),
- Ізолювати стилі (щоб глобальний CSS не ламав зовнішній вигляд),
- Створити перевикористовуваний елемент (наприклад,
<custom-slider>), - Зробити компонент самодостатнім, як
<video>чи<select>.
Приклад із реального життя
Звичайний DOM:
Тобі довелося перевизначити стилі кнопок на всьому сайті, і раптом кнопки в компоненті "зламалися" - тому що стилі глобальні.
Shadow DOM:
Компонент із власними стилями ізольований,
і жодні глобальні button { color: red } на нього не вплинуть.
Підсумок
| Критерій | Звичайний DOM | Shadow DOM |
|---|---|---|
| Видимість | Доступний усьому коду | Прихований і ізольований |
| Стилі | Спільні | Ізольовані |
| Використання | Повсякденний HTML | Компоненти і вбудовані елементи |
| Взаємодія | Через document | Через shadowRoot |
| Безпека | Немає ізоляції | Є інкапсуляція |
Запам'ятай просто:
- Звичайний DOM - спільний для всієї сторінки.
- Shadow DOM - окремий "міні-світ" всередині елемента, зі своїми стилями, логікою і DOM-структурою.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.