Последнее время на многих проектах я использую библиотеку UI-компонентов shoelace.style. Поэтому хочу поделиться опытом.
Библиотека построена на базе веб-стандартов и под капотом использует Lit. Каждый UI-компонент поставляется в виде веб-компонента. Это делает библиотеку независимой от фреймворков, что отличает её от таких решений, как MUI, Vuetify, Angular Material и т.д. При этом компоненты Shoelace можно использовать во Vue и Angular. С 19 версии React их полноценно можно будет использовать и там, а пока автор предоставляет для React компоненты-обёртки.
Другой особенностью Shoelace является устройство стилей. Библиотека предоставляет базовую светлую и тёмную темы. Это CSS-файлы, в которых содержатся токены в виде пользовательских свойств CSS (палитра, отступы, размеры, закругления, тени и т.д.) и несколько служебных классов. В остальном там нет никаких других стилей.
Все необходимые стили содержатся в Shadow DOM у каждого UI-компонента. Эти стили изолированы от внешнего воздействия, но по правилам Shadow DOM они наследуют значения наследуемых свойств и видят внешние пользовательские свойства CSS. Если подключена тема, то компоненты будут использовать объявленные в ней свойства. Если тема не подключена, компоненты будут работать, но потеряют свой внешний вид.
Можно создать свою тему, подключив CSS-файл со своими значениями пользовательских свойств. Такой вариант подойдёт, когда библиотека используются в качестве UI kit, то есть интерфейс приложения будет полностью построен на компонентах этой библиотеки.
Но можно использовать компоненты точечно. Если в проекте нужна только карусель и диалоговое окно, библиотека позволяет взять только эти компоненты и не тянуть лишнее. Самый простой способ — воспользоваться автозагрузчиком. Он ищет на странице компоненты и сам подгружает нужные для их работы модули. Можно подключить нужный компонент самостоятельно через
<script>, как в старые добрые времена, или импортировать модуль в JS при помощи import или import().Библиотека также поставляет API к каждому компоненту в виде атрибутов, свойств, методов, событий, пользовательских свойств CSS, слотов и частей (CSS Shadow Parts). Благодаря этому компоненты можно стилизовать практически как угодно. Это большой плюс, потому что некоторые библиотеки крайне сложно кастомизировать.
В основном над Shoelace работает один человек — Cory LaViska. Он активно развивает библиотеку и выпускает новые версии. Одни раз я столкнулся с багом и создал issue на github, которое было решено в течении нескольких дней. Также автор уделяет большое внимание доступности. При разработке компонентов он опирается на рекомендации WCAG и ARIA практики. В общем рекомендую взглянуть на эту библиотеку.