В завершение темы Shadow DOM — небольшой тред о слотах и композиции, которые я как-то обошел стороной.
Элемент <slot> является частью Shadow DOM и включен в стандарт WHATWG. Во времена “версии 0” в Chrome ему предшествовал элемент <content>, работавший несколько иначе.
developer.mozilla.org/en-US/docs/Web…
Назначение <slot> — проекция контента из так называемого “light DOM” (снаружи) в определенную точку внутри Shadow DOM. За примерами в очередной раз отсылаю к учебнику Ильи Кантора.
learn.javascript.ru/slots-composit…
Компонент с Shadow DOM может применять стили к переданным в слоты элементам с помощью псевдоэлемента ::slotted(). Важный момент: использование сложных селекторов не допускается.
developer.mozilla.org/en-US/docs/Web…
На практике это означает, что если внутрь слота передать элемент <ul>, то стили к самому списку с помощью ::slotted(ul) применить можно, а вот ::slotted(ul li) использовать не получится.
При добавлении или удалении элементов на элементе <slot> возникает событие slotchange. Оно не является синхронным и срабатывает в конце микротаска, после Mutation Observer.
developer.mozilla.org/en-US/docs/Web…
Кстати, лучший способ более детально ознакомиться с API, о которых я рассказываю (в том числе и слотами) — проект web-platform-tests. Для Shadow DOM там есть целый набор тест-кейсов.
github.com/web-platform-t…
Интересный факт: Svelte 3 отказался от нативных слотов, потому что контент в них попадает сразу, тогда как по мнению Rich Harris для фреймворка удобнее возможность отложенного рендеринга.
На мой взгляд, это достаточно показательный момент: фреймворки предпочитают свою модель композиции, поскольку она лучше решает их задачи, и привносят свои абстракции (scoped slots).
Vue поддерживает компиляцию в кастомные элементы, используя при этом нативные слоты (но scoped slots не поддерживаются).
github.com/vuejs/vue-web-…
Одна из возможных перспектив применения слотов — кастомизация нативных элементов (в первую очередь, select). Этой теме посвящен черновик Custom Control UI от разработчиков Edge.
github.com/MicrosoftEdge/…
Этот проект находится в стадии прототипирования (intent to prototype был опубликован в августе этого года). Кроме слотов, среди идей упоминаются и CSS Shadow Parts для нативных элементов.
groups.google.com/u/0/a/chromium…
Заодно стоит упомянуть проект Open UI, в рамках которого разработчики Edge, Salesforce и Chrome обсуждают улучшения стандартных элементов интерфейса, представленных в HTML.
open-ui.org