Композиция и слоты в Shadow DOM
Тред из третьего дня моей недели в @jsunderhood.
В завершение темы Shadow DOM — небольшой тред о слотах и композиции, которые я как-то обошел стороной.
— jsunderhood (@jsunderhood) November 11, 2020
Элемент <slot> является частью Shadow DOM и включен в стандарт WHATWG. Во времена “версии 0” в Chrome ему предшествовал элемент <content>, работавший несколько иначе.https://t.co/paEHC76He0
— jsunderhood (@jsunderhood) November 11, 2020
Назначение <slot> — проекция контента из так называемого “light DOM” (снаружи) в определенную точку внутри Shadow DOM. За примерами в очередной раз отсылаю к учебнику Ильи Кантора.https://t.co/H2cble6PS1
— jsunderhood (@jsunderhood) November 11, 2020
Компонент с Shadow DOM может применять стили к переданным в слоты элементам с помощью псевдоэлемента ::slotted(). Важный момент: использование сложных селекторов не допускается.https://t.co/XAPedK6UVy
— jsunderhood (@jsunderhood) November 11, 2020
На практике это означает, что если внутрь слота передать элемент <ul>, то стили к самому списку с помощью ::slotted(ul) применить можно, а вот ::slotted(ul li) использовать не получится.
— jsunderhood (@jsunderhood) November 11, 2020
При добавлении или удалении элементов на элементе <slot> возникает событие slotchange. Оно не является синхронным и срабатывает в конце микротаска, после Mutation Observer.https://t.co/4rlUn8mR6P
— jsunderhood (@jsunderhood) November 11, 2020
Кстати, лучший способ более детально ознакомиться с API, о которых я рассказываю (в том числе и слотами) — проект web-platform-tests. Для Shadow DOM там есть целый набор тест-кейсов.https://t.co/dg16DcVOrH
— jsunderhood (@jsunderhood) November 11, 2020
Интересный факт: Svelte 3 отказался от нативных слотов, потому что контент в них попадает сразу, тогда как по мнению Rich Harris для фреймворка удобнее возможность отложенного рендеринга.
— jsunderhood (@jsunderhood) November 11, 2020
На мой взгляд, это достаточно показательный момент: фреймворки предпочитают свою модель композиции, поскольку она лучше решает их задачи, и привносят свои абстракции (scoped slots).
— jsunderhood (@jsunderhood) November 11, 2020
Vue поддерживает компиляцию в кастомные элементы, используя при этом нативные слоты (но scoped slots не поддерживаются). https://t.co/1TUUpdCbsh
— jsunderhood (@jsunderhood) November 11, 2020
Одна из возможных перспектив применения слотов — кастомизация нативных элементов (в первую очередь, select). Этой теме посвящен черновик Custom Control UI от разработчиков Edge.https://t.co/7zJQyS3aK9
— jsunderhood (@jsunderhood) November 11, 2020
Этот проект находится в стадии прототипирования (intent to prototype был опубликован в августе этого года). Кроме слотов, среди идей упоминаются и CSS Shadow Parts для нативных элементов.https://t.co/3EZccHwMUQ
— jsunderhood (@jsunderhood) November 11, 2020
Заодно стоит упомянуть проект Open UI, в рамках которого разработчики Edge, Salesforce и Chrome обсуждают улучшения стандартных элементов интерфейса, представленных в HTML.https://t.co/VlqJMuOCC1
— jsunderhood (@jsunderhood) November 11, 2020