part и exportparts для внешней стилизации

Строгая инкапсуляция стилей в теневом DOM не позволяет потребителям изменять стили отдельных элементов внутри компонента. Пользовательские свойства подходят для глобальных значений, но, например, нельзя задать внутренней кнопке закрытия собственный радиус границы. Для этого используются parts.

Пометьте элемент внутри теневого дерева атрибутом part="name". После этого потребители смогут выбрать его с помощью псевдоэлемента ::part(name): my-dialog::part(close-button) { color: red; }. Именованный элемент становится точкой расширения для стилизации, а остальная часть теневого дерева остаётся инкапсулированной.

Разделяйте имена пробелами, чтобы открыть один элемент как несколько parts: part="button primary". ::part(button) выбирает его в общем случае, а ::part(primary) — как элемент с основным стилем. Каждое имя сопоставляется независимо.

::part допускает только некоторые псевдоклассы (:hover, :focus, :disabled), но не комбинаторы потомков и не дополнительный структурный выбор. ::part(card) p недействителен: нельзя обратиться внутрь part с помощью селекторов потомков.

Когда пользовательский элемент содержит другой пользовательский элемент внутри собственного теневого дерева, parts внутреннего элемента обычно не видны внешней странице. Атрибут exportparts="close-button" на вложенном элементе передаёт эти parts внешнему хосту.

exportparts="close-button: dismiss" экспортирует внутренний part под новым именем на внешнем элементе. Благодаря этому внешний компонент может предоставлять понятный интерфейс имён независимо от того, какие внутренние элементы он объединяет.

Пользовательские свойства предоставляют значения (цвета, интервалы, шрифты). Parts предоставляют элементы (полный набор возможностей CSS — границы, трансформации, анимации). Используйте пользовательские свойства для глобальных токенов, а parts — для разовой настройки отдельных элементов. Оба подхода могут использоваться в одном компоненте.

Практика дизайн-систем: предоставляйте небольшой набор parts для элементов, которые чаще всего настраивают (кнопок, заголовков, индикаторов), а также широкий набор пользовательских свойств для цветов, интервалов и типографики. Потребители смогут настраивать тему на уровне значений или элементов в зависимости от своей задачи.

Имена parts становятся частью публичного API компонента — их изменение нарушает CSS потребителей. Выбирайте имена, описывающие роль элемента ("close-button", "header", "track"), а не его положение ("first-button"), чтобы API оставался понятным по мере развития реализации.

Перечислите все доступные parts (и экспортируемые parts) в файле readme компонента. Без документации потребителям приходится изучать DOM, чтобы обнаружить parts, из-за чего они оказываются связаны с тем, что случайно найдут. Относитесь к списку parts так же, как к списку свойств компонента фреймворка.

::part и exportparts доступны во всех современных браузерах. Даже старые версии Safari теперь поддерживают ::part. Используйте их без ограничений; для очень старых браузеров (большинство из которых уже не используется) в качестве обходного решения применяйте дополнительные пользовательские свойства CSS.

Атрибут part открывает отдельные элементы теневого дерева для внешней стилизации через ::part(name), предоставляя всю мощь CSS без нарушения инкапсуляции. exportparts передаёт parts из вложенных пользовательских элементов внешнему хосту и при необходимости переименовывает их. Сочетайте parts с пользовательскими свойствами CSS для полноценной поверхности темизации и документируйте список parts как часть API компонента.