Кастомизация и CSS Shadow Parts
Тред из третьего дня моей недели в @jsunderhood.
Еще один важный аспект Shadow DOM — кастомизация стилей. При наличии изоляции это становится проблемой, поскольку некоторые стили надо переопределять. Небольшой тред на эту тему.
— jsunderhood (@jsunderhood) November 11, 2020
Первое, о чем стоит помнить: наследуемые свойства (color, font-family и другие) на элементе с shadow root проникают внутрь, то есть каскад работает. Некоторые считают это поведение проблемой.
— jsunderhood (@jsunderhood) November 11, 2020
Кастомные свойства (CSS-переменные) являются наследуемыми по умолчанию и тоже пересекают границы Shadow DOM. Если объявить свойство на html, оно будет доступно в любом shadow root.https://t.co/ZVjdtFkZDw
— jsunderhood (@jsunderhood) November 11, 2020
Кастомные свойства можно комбинировать с селектором :host() и устанавливать их значения в зависимости от атрибута на элементе. Это позволяет поддерживать разные темы или варианты.https://t.co/y4NvxlNR4V pic.twitter.com/MAAwTkb0SZ
— jsunderhood (@jsunderhood) November 11, 2020
О селекторах :host и :host() можно почитать на MDN и в учебнике Ильи Кантора. Замечу, что :host-context() есть только в Chrome и, вероятно, будет удален из-за проблем с производительностью.https://t.co/3jBxMyecJ8
— jsunderhood (@jsunderhood) November 11, 2020
Долгое время кастомные свойства были единственным способом кастомизации в библиотеках веб-компонентов. Это было не так уж удобно: не делать же переменную для каждого CSS-свойства.
— jsunderhood (@jsunderhood) November 11, 2020
Polymer и компоненты Paper Elements использовали механизм CSS-миксинов. Они так и не стали стандартом и не были реализованы в браузерах. Tab Atkins в своем блоге объяснил, почему.https://t.co/fuJo1cbT3g
— jsunderhood (@jsunderhood) November 11, 2020
При использовании кастомных элементов можно модифицировать стили с помощью наследования: класс-потомок переопределяет CSS родителя. Этот подход использовался в библиотеке Elix.https://t.co/qiTkWJkg3D
— jsunderhood (@jsunderhood) November 11, 2020
Не так давно (Firefox 72, Safari 13.1) появились CSS Shadow Parts. На сегодняшний день это рекомендуемый способ кастомизации Shadow DOM. О том, как он работает, у меня есть статья с примерами.https://t.co/o6FFhESz65
— jsunderhood (@jsunderhood) November 11, 2020
Вкратце, псевдоэлемент ::part() позволяет переопределять стили отдельных элементов в Shadow DOM, имеющих атрибут part — подобно тому, как это делает ::placeholder() для нативного input.https://t.co/Yiz3TDwZCg
— jsunderhood (@jsunderhood) November 11, 2020
Изначально вместе с ::part() предлагался также селектор ::theme() для решения проблемы темизации компонентов. На данный момент он не реализован, идет обсуждение возможных альтернатив.https://t.co/AxjPzIqZwY
— jsunderhood (@jsunderhood) November 11, 2020
Единственным механизмом темизации пока остаются кастомные CSS свойства. Cassondra Roberts из Red Hat предложила подход к их именованию, применяемый в библиотеке PatternFly Elements.https://t.co/HIx4wUFAHn
— jsunderhood (@jsunderhood) November 11, 2020