От автора: DOM или Document Object Model (объектная модель документа) – знакомая всем концепция. Некоторым она нравятся, но у большей части она вызывает лишь головную боль. John Resig даже сказал как-то, что DOM это мусор.
Тема уже давно устарела, а множество вопросов, которые раньше волновали людей, ушли в прошлое, так как они были связаны не с DOM, а с набором инструментов для работы с ним (они реально усложняли нам жизнь).
На дворе 2017, и сегодняшние инструменты для получения доступа и манипулирования узлами DOM впечатляют (особенно если вы, как и я, начинали со времен, когда document.getElementById был пределом мечтаний).
Плохая сторона работы с DOM заключается в том, что этот процесс довольно затратный. Более точные перерисовки могут ударить и ударят по аппаратным ресурсам, что неизбежно поставит под угрозу производительность ваших приложений.
Virtual DOM
Virtual DOM – полное представление реального DOM. Его самой важной особенностью является группировка изменений и выполнение одиночного повторного рендеринга вместо множества мелких. Если коротко, то можно сказать, что Virtual DOM решает проблемы, связанные с производительностью (Не буду вдаваться в подробности принципа работы Virtual DOM. В рамках этой статьи достаточно знать, зачем он нужен.)
Shadow DOM
Shadow DOM, как настоящий интроверт, надежно защищает себя от влияния окружающих элементов и не заинтересован и не интересуется изменениями снаружи.
Спросите себя, какую главную UI-проблему решают фреймворки типа React и VueJS?
Инкапсуляция
CSS – сложная штука. Все становится еще сложнее, если вы соединяете стили, пытаясь повторно их использовать в различных комбинациях. Это неизбежно приводит к регрессивным ошибкам интерфейса, сложному обслуживанию и плохой масштабируемости. И все же, я считаю, что основная проблема это не CSS, а то, как мы его используем.
Shadow DOM – инструмент, помогающий обойти инкапсуляцию DOM на нативном уровне. Суть не просто в CSS, а в элементах.
В отличие от обычного DOM Shadow DOM идет маленькими кусочками. То есть это не полное представление всего DOM. Представьте Shadow DOM в виде лего, формирующего реальный DOM, где каждый кирпичик представляет собой отдельный DOM.
Shadow DOM – это инкапсуляция.
Согласно MDN и w3, спецификация Shadow DOM находится в разработке. Поэтому поддержка в браузерах не очень хорошая… и, скорее всего, текущая реализация изменится. Однако основная концепция должна сохраниться.
Заключение
Надеюсь, теперь вы поняли, какую проблему пытается решить Shadow DOM, и чем он отличается от Virtual DOM.
В недалеком будущем нужно будет знать, как обрабатывать инкапсуляцию и компоненты на уровне браузера. Когда наступит этот день, множество кастомных функций в фреймворках станут не нужны. Почти всегда лучше использовать нативную реализацию, чем делать свою… «Поиграйтесь с Shadow DOM, всегда полезно изучить что-то новое.»
Источник: //develoger.com/
Редакция: Команда webformyself.
