Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Shadow DOM проти DOM». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Визначення

| Тип | Що це таке |
|---|---|
| **Звичайний (Light) DOM** | Це "основне" дерево HTML-документа - все, що ти пишеш у HTML і бачиш у DevTools. |
| **Shadow DOM** | Це **вкладене, ізольоване DOM-дерево** всередині елемента (компонента), яке має **власні стилі, розмітку і поведінку**, і не впливає на зовнішній документ. |

Тобто:

> **Light DOM** - це "поверхня сайту",
> **Shadow DOM** - "нутрощі компонента", приховані від решти світу.

---

## 2. Приклад різниці

### Звичайний DOM

```javascript
<div class="card">
  <h2>Заголовок</h2>
  <button>Клік</button>
</div>
```

Все видно в основному DOM, можна дістати через `document.querySelector('button')`.
Глобальні стилі впливають на все (`button { color: red; }` зробить кнопку червоною).

---

### Shadow DOM

```javascript
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. Візуально

```javascript
<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 бачить тільки "оболонку":

```javascript
console.log(document.querySelector('my-card').innerHTML);
// Порожньо, тому що нутрощі сховані в Shadow DOM
```

### Shadow DOM доступний тільки через посилання:

```javascript
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-структурою.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати555 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.