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

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

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

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

Контент

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

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

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

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

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

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

> **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>

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>

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

<slot name="title"></slot>
```

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

---

## Підсумок

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

---

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

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

Для рев’юера

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

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