Виртуальный DOM — это абстракция реального DOM, используемая в таких библиотеках, как React. Он представляет собой легковесное дерево объектов в памяти, которое отражает структуру UI. При изменениях в состоянии приложения создаётся новое виртуальное дерево, которое сравнивается с предыдущим (diffing), и затем минимально необходимые изменения применяются к реальному DOM. Это повышает производительность, снижая количество операций с реальным DOM.

Shadow DOM — это технология веб-компонентов, позволяющая инкапсулировать часть DOM и CSS внутри компонента. Элементы внутри shadow DOM изолированы от остальной страницы, что предотвращает конфликт стилей и скриптов. Shadow DOM создаёт отдельное дерево DOM, вложенное в элемент, но оно существует в реальном DOM и влияет на рендеринг.

Итого:

Виртуальный DOM — это абстрактное представление DOM в памяти для оптимизации обновлений UI.
Shadow DOM — это реальный изолированный поддерево DOM для инкапсуляции компонентов и стилей.

Пример использования виртуального DOM в React:

function Counter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Пример создания shadow DOM:

const host = document.querySelector('#host');
const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `<style>p { color: red; }</style><p>Shadow DOM content</p>`;

В чём отличие виртуального DOM от shadow DOM?