В чем разница между Shadow DOM и Virtual DOM?

Несмотря на похожие названия, это технологии из разных областей: Shadow DOM — стандарт браузера про инкапсуляцию, Virtual DOM — приём библиотек про эффективные обновления.

Shadow DOM

Часть спецификации Web Components. Позволяет прикрепить к элементу изолированное «теневое» поддерево:

const shadow = element.attachShadow({ mode: 'open' });
shadow.innerHTML = `
  <style>p { color: red; }</style>  <!-- стили не выходят наружу -->
  <p>Инкапсулировано</p>
`;

• Цель — инкапсуляция: стили и разметка компонента не влияют на страницу и не подвержены внешним стилям.
• Это реальный DOM, живущий в браузере; браузерные <video>, <input type="range"> внутри устроены именно так.
• Используется в дизайн-системах на Web Components (например, виджеты, встраиваемые на чужие сайты).

Virtual DOM

Концепция React (и других библиотек): JS-копия дерева UI в памяти.

• Цель — производительность и декларативность: строить новое дерево на каждое обновление, диффом вычислять минимальные правки реального DOM.
• В браузере не существует — это структуры данных библиотеки.

Сопоставление

• Кто определяет: Shadow DOM — стандарт W3C, реализован браузером; Virtual DOM — паттерн конкретных библиотек.
• Задача: изоляция стилей/разметки против оптимизации обновлений.
• Где живёт: в реальном дереве браузера против памяти JS.
• Связь: не конкурируют и могут сочетаться — React-приложение можно рендерить внутрь Shadow DOM.

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

Shadow DOM — браузерный стандарт инкапсуляции: изолированное поддерево со своими стилями (основа Web Components). Virtual DOM — приём React: JS-копия дерева для вычисления минимальных обновлений. Разные задачи — изоляция против производительности; технологии не взаимоисключающие.