Кратко

  • Первый публичный проект W3C от мая 2012 года предложил функциональные границы между поддеревьями DOM. Проект 2014 года развил тему композиции деревьев, а заметка 2018 года зафиксировала перенос материала в DOM, HTML, CSS Scoping и UI Events.
  • Современный стандарт DOM позволяет назначать обычные дочерние узлы страницы слотам теневого дерева. Родитель этих узлов в исходном дереве не меняется. В CSS предусмотрены осознанные точки настройки: :host, ::slotted и ::part.

Представим карточку новости: рамка, кнопка, место для снимка и заголовка. Разработчик карточки продумал оформление. Редакция приносит снимок и заголовок. Общая таблица стилей сайта тем временем готова перекрасить любую кнопку в ядовито-зелёный. Оставить всё в одном пространстве — получить спор о каждой детали. Запереть карточку наглухо — оставить редакцию с фотографией в коридоре. Нужна была дверь с понятными правилами.

Первый публичный рабочий проект W3C от 22 мая 2012 года описал функциональные границы между поддеревьями одного документа. Компонент получал внутреннюю структуру, продолжая участвовать в странице. В проекте от 17 июня 2014 года центральным стал вопрос композиции нескольких деревьев в одну видимую иерархию. Эти тексты отражают замысел своего времени и показывают, какую проблему пытались решить авторы стандарта.

Затем правила разъехались по основным документам платформы. Заметка рабочей группы W3C от 1 марта 2018 года сообщает о включении материала Shadow DOM в спецификации DOM и HTML, CSS Scoping и UI Events. План здания, отделка и поведение при событиях оказались в соответствующих книгах. Переезд документа не отменил устройство комнаты: границы и составление деревьев остались частью браузерной платформы.

По действующему DOM Living Standard организации WHATWG элемент страницы может быть host для shadow root и внутреннего дерева под ним. Обычные дети host, которых передала страница, находятся в light tree. Внутри теневого дерева есть слоты; некоторым детям страницы назначается место в этих слотах. Фотография видна в верхней части карточки, но в исходном дереве DOM она остаётся дочерним узлом страницы. Браузер меняет рассадку для представления, а не родословную узла.

Из-за этого отладка требует двух взглядов. На экране фотография и кнопка рядом; в деревьях они могут жить по разные стороны границы. Пустой слот способен показать запасное содержимое, подготовленное компонентом. Если судить о родителях узлов по внешнему виду, поведение селекторов покажется капризом. Если сначала выяснить, кто где живёт, каприз превращается в правило.

Оформление границы описывает редакторский проект CSS Shadow Module Level 1 группы CSSWG. Обычные селекторы внешней страницы не идут через shadow root ко всем внутренним элементам подряд. Компонент может открыть выбранные поверхности: :host позволяет работать с host из стилей компонента, ::slotted касается назначенного содержимого в ограниченных пределах, а ::part даёт имя внутренней части, которую решено предоставить внешнему оформлению. Ручку двери можно выставить наружу, не вывешивая рядом ключи от каждого шкафа.

Документ CSS остаётся редакторским проектом; здесь он поясняет замысел интерфейсов. Хронологию дают оригиналы W3C 2012, 2014 и 2018 годов. Вместе источники показывают договор двух авторов: страница приносит содержимое, компонент назначает ему места и открывает выбранные поверхности, браузер собирает цельную картину.