Есть ли 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.