Что такое Shadow Virtual DOM

Ответ

Shadow DOM — это изолированное поддерево DOM, которое не влияет на основной документ. Оно позволяет инкапсулировать стили и логику компонента, предотвращая конфликты.

Пример:

<div id="host"></div>
<script>
  const host = document.getElementById('host');
  const shadowRoot = host.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `
    <style>p { color: red; }</style>
    <p>Текст внутри Shadow DOM</p>
  `;
</script>

Здесь стиль p не повлияет на другие элементы вне Shadow DOM.

Особенности:

mode: 'open' — доступ к ShadowRoot через JavaScript.
mode: 'closed' — полная изоляция (редко используется).
Подходит для веб-компонентов.