- Попробовать онлайн: https://lit.dev/playground/
- Стартовый шаблон Vite:
npm create vite@latest -- --template lit-ts
Для вашего удобства можно посмотреть примеры в этом репозитории:
- Демо приложение с UI-kit на Lit:
npm run start:demo, исходный код: app, UI-kit. - Запустить
storybook:npm run storybook:ui.
Альтернативно можно использовать скаффолдер от open-wc: npm init @open-wc.
Developer Experience:
- Открытый консорциум по веб-компонентам. Тут можно найти множество полезных рекомендаций, библиотек и инструментов, начиная от плагинов для IDE, заканчивая инструментами для тестирования веб-компонентов.
- VSCode плагин для Lit
- Манифест для веб-компонентов для поддержки в IDE
UI-kit, разработанные на Lit:
Shadow DOM:
- Документация
- Декларативный Shadow DOM
- Form Associated Custom Elements - как подружить кастомные элементы с формами. Можно посмотреть реализацию в Material 3.
- Вебвизор не работает с Shadow DOM
Поддержка веб-компонентов в фреймворках:
- Сравнение всех фреймворков. Обязательно посмотрите, если планируете разрабатывать универсальный ui-kit!
- React
- Vue
- Angular
Киллер-фичи Lit:
- Асинхронный рендеринг
- Пользовательские директивы
- Реактивные контроллеры
- Дополнительные библиотеки для: анимирования, виртуализации и прочего
Статистика:
- State of HTML 2024, Web Components
- Web Almanac 2024, Custom Elements
- Chrome page loads, CustomElementRegistryDefine
Полезные веб-компоненты:
Иное:
- История развития веб-компонентов [1], [2]
- Как ESM влияет на тришейкинг [1], [2]
- Ускорение Edge за счет использования веб-компонентов
- Известные баги Shadow DOM в Safari см. список depends on
Перед началом выполнить: npm install
- Live примеры:
npm run presentation - Статичные примеры с пояснениями:
npm run examples