Что такое Shadow DOM

Shadow DOM — это технология, позволяющая инкапсулировать стили и структуру DOM внутри компонента, изолируя их от основного документа. Это часть Web Components. **Особенности:** - Стили внутри Shadow DOM не влияют на внешний документ и наоборот. - DOM-элементы внутри Shadow DOM скрыты от глобальных запросов (`querySelector`). **Пример:** ```javascript const div = document.createElement('div'); const shadowRoot = div.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = `

Текст внутри Shadow DOM

`; document.body.appendChild(div); ``` Здесь `

` будет красным только внутри Shadow DOM, а `document.querySelector('p')` его не найдёт. **Режимы:** - `open` — доступ через `element.shadowRoot`. - `closed` — полная изоляция (редко используется).