Вопрос проверяет понимание изоляции разметки и стилей, а также принципов работы Web Components.
DOM — это общее дерево элементов страницы, доступное для JavaScript и CSS. Shadow DOM — это изолированное поддерево, привязанное к конкретному элементу. Стили и разметка внутри Shadow DOM не влияют на остальную страницу. Это позволяет создавать переиспользуемые и защищенные компоненты. Shadow DOM активно используется в Web Components.
В браузере существует несколько уровней работы с разметкой, и Shadow DOM был введен для решения проблем глобальности DOM и CSS.
DOM представляет собой единую структуру документа:
все элементы находятся в одном дереве
CSS по умолчанию глобален
JavaScript может получить доступ к любому узлу
Это удобно, но в больших приложениях приводит к конфликтам стилей и непредсказуемому поведению.
Shadow DOM создает изолированное поддерево внутри элемента:
стили внутри не протекают наружу
внешние стили не влияют на содержимое Shadow DOM
структура скрыта от прямого обхода DOM
Пример создания Shadow DOM:
const host = document.querySelector('#app')
const shadowRoot = host.attachShadow({ mode: 'open' })
shadowRoot.innerHTML = `<p>Shadow content</p>`
Ключевые отличия можно описать так:
DOM глобален, Shadow DOM изолирован
CSS в DOM влияет на всю страницу, в Shadow DOM — только на компонент
Shadow DOM предназначен для компонентного подхода
Shadow DOM решает проблему изоляции разметки и стилей. Он особенно полезен при создании переиспользуемых UI-компонентов и лежит в основе Web Components.