Теневой (Shadow) DOM и Virtual DOM (виртуальное DOM) - это два разных концепта, которые используются в веб-разработке.

1. Теневой (Shadow) DOM - это технология, которая позволяет создавать изолированные компоненты пользовательского интерфейса, которые могут быть вложены в другие веб-страницы или веб-приложения. Теневой DOM представляет собой отдельную иерархическую структуру элементов HTML, которая находится внутри основной страницы. Каждый теневой DOM может содержать свой собственный CSS-код, JavaScript-код и обработчики событий, что позволяет создавать более сложные и гибкие пользовательские интерфейсы.

То, что находится под #shadow-root – и называется «shadow DOM».

Теневой DOM – это способ создать свой, изолированный, DOM для компонента.

1. shadowRoot = elem.attachShadow({mode: open|closed}) – создаёт теневой DOM для elem. Если mode="open", он доступен через свойство elem.shadowRoot.
2. Мы можем создать подэлементы внутри shadowRoot с помощью innerHTML или других методов DOM.

Элементы теневого DOM:

• Обладают собственной областью видимости идентификаторов
• Невидимы JavaScript селекторам из главного документа, таким как querySelector,
• Стилизуются своими стилями из теневого дерева, не из главного документа.

2. Virtual DOM - это концепция, которая используется в React для улучшения производительности при работе с пользовательским интерфейсом. Виртуальное DOM - это легковесное представление реальной DOM-структуры, которое хранится в памяти и обновляется только при необходимости.

Ключевая разница между теневым и виртуальным DOM заключается в том, что теневой DOM - это отдельная иерархическая структура элементов HTML, которая может быть вложена в другие веб-страницы или веб-приложения, а виртуальное DOM - это легковесное представление реальной DOM-структуры, которое используется в React для повышения производительности и упрощения процесса разработки и обслуживания пользовательского интерфейса.

Назад