В чем различия между Shadow DOM, Virtual DOM и Regular DOM?

Regular DOM (Document Object Model)

Древовидное представление XML/HTML документа, которое является API для взаимодействия с содержанием, структурой и стилями документа. Изменения в DOM напрямую влияют на отображение страницы в браузере. Манипуляции с DOM могут быть медленными, особенно на сложных страницах, из-за перерисовки и перерасчета стилей.

Virtual DOM

Концепция в JavaScript, представляющая собой легковесное древовидное представление DOM в памяти. При изменении состояния приложения создается новый Virtual DOM. Затем он сравнивается с предыдущим Virtual DOM (процесс называется "diffing"). Определяются минимальные изменения, которые необходимо внести в Regular DOM. Эти патчи применяются к Regular DOM, что минимизирует прямое взаимодействие с ним и ускоряет обновление интерфейса, особенно в реактивных фреймворках (React, Vue).

Shadow DOM

Веб-стандарт, позволяющий инкапсулировать DOM-поддерево и стили внутри компонента. Создает изолированное Scope, которое не конфликтует с остальным DOM и стилями страницы. Используется для создания веб-компонентов.

Пример Virtual DOM (концептуально)

// Представим, что это наше состояние
let data = {
  text: 'Привет',
  count: 0
};

// Создание Virtual DOM (псевдокод)
function createVirtualDOM(data) {
  return {
    type: 'div',
    props: {},
    children: [
      {
        type: 'p',
        props: {},
        children: [data.text]
      },
      {
        type: 'button',
        props: {
          onClick: () => { /* обновить состояние */ }
        },
        children: ['Нажми ' + data.count]
      }
    ]
  };
}

let oldVirtualDOM = createVirtualDOM(data);

// Изменяем состояние
data.count++;

let newVirtualDOM = createVirtualDOM(data);

// Процесс diffing (сравнение oldVirtualDOM и newVirtualDOM)
// Обнаружено изменение в текстовом узле кнопки
// Применение патча к Regular DOM (обновление только текста на кнопке)

Пример Shadow DOM (API)

// Создаем хост-элемент
const hostElement = document.createElement('div');
document.body.appendChild(hostElement);

// Присоединяем Shadow DOM к хосту
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // mode: 'open' или 'closed'

// Добавляем содержимое и стили в Shadow DOM
shadowRoot.innerHTML = `
  <style>
    p {
      color: blue; // Этот стиль применяется только внутри Shadow DOM
    }
  </style>
  <p>Это текст внутри Shadow DOM.</p>
`;

// Стили, определенные вне Shadow DOM, не влияют на содержимое p внутри него.