PassFront
  1. PassFront
  2. База знаний
  3. Основы React

Есть ли Shadow DOM в React?

Основы React

Нет — React не использует Shadow DOM. Это разные технологии: Shadow DOM — браузерный стандарт инкапсуляции (Web Components), React работает с обычным («light») DOM через свой Virtual DOM.

Почему путают

Названия похожи, и обе технологии «про дерево элементов». Но:

  • Virtual DOM (React) — JS-объекты в памяти для вычисления минимальных обновлений; в браузере не существует.
  • Shadow DOM (стандарт) — реальное изолированное поддерево в браузере со своими стилями (element.attachShadow()); основа <video>-контролов и Web Components.

React рендерит компоненты в обычный DOM: никакой изоляции стилей «из коробки» React-компоненты не имеют — стили глобальны, если не использовать CSS Modules/CSS-in-JS (которые изолируют классы именами, а не Shadow DOM).

Могут ли они сочетаться

Да, вручную:

  • React-приложение можно отрендерить внутрь Shadow Root (createRoot(shadowRoot).render(...)) — так делают встраиваемые виджеты, чтобы стили сайта-хозяина не ломали виджет и наоборот;
  • React может рендерить кастомные элементы (Web Components) в разметке; React 19 существенно улучшил поддержку custom elements (пропсы/события).

Нюансы интеграции: события из Shadow DOM ретаргетируются, порталы и фокус требуют внимания, глобальные стили не проникают внутрь.

Итоговое сопоставление

  • Задача: инкапсуляция (Shadow) против эффективных обновлений (Virtual).
  • Где живёт: в браузере против памяти JS.
  • Изоляция стилей: есть против нет (решается инструментами сборки).

Коротко для собеседования

В React Shadow DOM нет — React использует Virtual DOM (JS-представление для диффа) и рендерит в обычный DOM без изоляции стилей. Shadow DOM — стандарт Web Components про инкапсуляцию; при желании React-приложение можно отрендерить внутрь Shadow Root (виджеты) — но это ручная интеграция, а не механизм React.

Другие вопросы раздела