Что такое 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' — полная изоляция (редко используется).
• Подходит для веб-компонентов.