出色的 Lit

精心策划的优秀 Lit 资源列表。

Lit — 一个用于构建快速、轻量级 Web 组件的简单库。

Lit 的核心是一个消除样板代码的组件基类，它提供了响应式状态、作用域样式和一个简洁、快速且富有表现力的声明式模板系统。

常用资源

社区

概述

入门模板

LitElement JavaScript 入门 - 使用 JavaScript 的 LitElement 示例组件。
LitElement TypeScript 入门 - 使用 TypeScript 的 LitElement 示例组件。
hello-web-components - 使用 Lit 和 TypeScript 编写的简单 Web 组件入门示例。
Lit Sass JavaScript 入门 - 使用 Rollup 的 SASS + JS + Lit 简单设置项目。
Lit Sass TypeScript 入门 - 使用 Rollup 的 SASS + TS + Lit 简单设置项目。
Lit Webpack 入门 - 使用 Webpack 的 Lit 和 Typescript 多页应用入门。
Open Web Components 生成器 - 基于 Open Web Components 推荐的入门应用。
pwa-starter - PWABuilder pwa-starter 的 LitElement 版本。
pwa-lit-template - 遵循现代 Web 标准构建渐进式 Web 应用。
Vite Lit Element TS SASS - 使用 Lit 2、Typescript 和 SASS 的 Vite 项目示例。
Vite Lit 入门 - Vite 的基于 Lit 的模板预设。
Vite Lit TS 入门 - Vite 的基于 Lit 和 TypeScript 的模板预设。

代码实验室

教程

示例

Lit Native - 在原生平台上重用Lit Web组件。
Lit节点编辑器 - 使用Canvas API和简单图形数据结构构建的节点编辑器。
Lit 3D钢琴 - 使用Lit、Three.js和Tone.js构建的3D钢琴。
Open Web Components示例 - 使用Lit的常见模式的代码示例。
Polymer → Lit迁移指南 - 展示从Polymer迁移到Lit的指导的代码示例。
Vite + RxDB + Lit - 让RxDB与Vite一起运行的最小示例。

Lit Labs

@lit/localize - 用于本地化使用Lit构建的Web应用程序的库和命令行工具。
@lit-labs/ssr - 用于服务器端渲染Lit模板和组件的包。
@lit-labs/motion - 用于制作动画的Lit指令。
@lit-labs/react - Web组件和响应式Lit控制器的React集成。
@lit-labs/scoped-registry-mixin - 与推测性的Scoped CustomElementRegistry polyfill集成的LitElement混入，用于评估提案并促进反馈。
@lit-labs/task - 用于渲染异步任务的Lit控制器。
@lit-labs/virtualizer - 为Lit提供虚拟滚动的包。

扩展

@adobe/lit-mobx - 用于在Lit中使用mobx的混入和基类。
@apollo-elements/lit-apollo - LitElement与Apollo GraphQL的集成。
@lit-app/state - 适用于Lit 2的精简简单的全局状态管理。
@shoelace-style/localize - 用于本地化自定义元素的微型库，为Lit提供指令。
@stefanholzapfel/lit-state - 适用于Lit 2的轻量级响应式状态管理。
@vaadin/form - 用TypeScript和Lit构建表单的实用工具集。
dark-theme-utils - 使用Web组件构建的暗黑模式实用工具。
exome - 支持Lit的深度嵌套状态管理器。
pure-lit - 将Lit元素注册为纯函数。
lit-element-effect - LitElement的效果钩子。
lit-element-state-decoupler - LitElement外部状态处理的实用工具。
lit-redux-router - 由pwa-helpers和Redux支持的Lit声明式路由方式。
lit-svelte-stores - 使用svelte stores作为状态管理的Lit控制器。
lit-vaadin-helpers - 在Lit 2中使用Vaadin Web组件的辅助工具。
ullr - 使用Lit通过函数式编程构建Web组件。

设计系统

AXA Pattern Library - 使用LitElement构建的AXA CH UI组件库。
Brightspace UI core - 用于构建Brightspace应用程序的Web组件集合。
Carbon Web Components - 基于Web组件的Carbon设计系统变体。
Clarity Core Web Components - Clarity设计系统的Web组件套件。
Kor - 开源设计系统和轻量级UI组件库。
Lion - 高性能、可访问且灵活的Web组件。
Material Web Components - 以Web组件形式实现的Material Design。
Momentum UI Web Components - 基于Momentum Design的UI组件集。
Outline Design System - 基于Web组件的设计系统入门套件。
Pharos Design System - JSTOR的设计系统，用于创建统一、支持性和美观的体验。
Red Hat Design System - 用于构建统一Red Hat品牌体验的Web组件。
Shoelace - 基于框架无关技术构建的专业设计UI组件集合。
Spectrum Web Components - 使用LitElement构建的Adobe Spectrum设计语言实现。
UI5 Web Components - 原生API之上的企业风格增强！

组件库

Apollo Elements - 自定义元素与Apollo GraphQL的结合。
Blackstone UI - 使用lit-html和LitElement构建的用于创建界面的Web组件。
Chartjs Web Components - Chartjs的Web组件。
Clever components - Clever Cloud制作的Web组件集合。
Curvenote - 用于创建交互式科学文章的Web组件。
Dile Components - 用于网站和应用程序的通用Web组件。
ESP Web Tools - 允许通过浏览器刷写ESPHome或其他基于ESP的固件。
Furo Webcomponents - 与Eclipse Furo最佳配合的企业级Web组件集。
Fusion Web Components - Equinor Fusion使用的Web组件集。
Ignite UI Web Components - Infragistics的完整UI组件库。
LRNWebComponents - ELMS:LN生产的适用于任何项目的Web组件。
Medblocks UI - 用于快速开发openEHR和FHIR系统的Web组件。
Microsoft Graph Toolkit - Microsoft Graph的Web组件集合。
Mutation testing elements - 突变测试结果的模式以及用于可视化的Web组件。
One Platform Components - Red Hat One Platform的Web组件集。
Playground Elements - 使用Web组件的无服务器代码体验。
Stripe Elements - Stripe.js v3 Elements的自定义元素包装器。
Titanium Elements - Leavitt Group Enterprises使用的轻量级Web组件集合。
TrendChart Elements - 用于生成表示趋势的简单图表的组件。
Umbraco UI Components - Umbraco CMS的用户界面Web组件集合。
Vidstack Elements - 符合规范的可定制、可扩展、可访问和通用的媒体元素。
VSCode Webview Elements - 用于创建使用Webview API的VSCode扩展的组件。
Web Components for TEI Publisher - TEI Publisher及其生成的应用程序使用的Web组件。
Webmarkets web components - Webmarkets的公共Web组件集。
Wired Elements - 看起来手绘风格的元素集合。
Wokwi Elements - Arduino和各种电子元件的Web组件。

独立组件

<api-viewer> - Web组件的API文档和实时演示平台。
<app-datepicker> - 使用LitElement和Material Design 2构建的日期选择器元素。
<burgton-button> - 简单易用、可定制且无障碍的汉堡按钮元素。
<code-block> - 使用Prism.js和LitElement显示彩色格式化代码的Web组件。
<codesandbox-button> - 点击时显示CodeSandbox演示的自定义元素。
<editor-container> - 基于块的编辑器，专为通用协作应用设计。
<granite-qrcode-generator> - 使用qr.js库生成和渲染二维码的自定义元素。
<helium-animated-pages> - 用Lit构建的创建CSS动画的Web组件。
<json-viewer> - 以树状视图可视化JSON数据的Web组件。
<light-gallery> - 适用于Lit的功能齐全的JavaScript图片和视频画廊。
<lit-datatable> - 由LitElement驱动的Material Design数据表实现。
<lottie-player> - 用于轻松嵌入和播放Lottie动画的Web组件。
<model-viewer> - 用于渲染交互式3D模型的Web组件。
<rapi-doc> - 用于查看OpenAPI 3.0和Swagger 2.0规范的Web组件。
<round-slider> - 用Lit构建的简单圆形滑块Web组件。
<stl-part-viewer> - 使用Three.js显示STL模型文件的LitElement Web组件。

工具

构建

babel-plugin-lit-property-types-from-ts - 基于TypeScript类型注释为Lit组件中声明的响应式属性设置type的Babel插件。
babel-plugin-template-html-minifier - 用于压缩标记模板字符串中HTML的Babel插件。
esbuild-plugin-lit - 用于将CSS、SVG、HTML、XLIFF文件导入为JavaScript标记模板字面量对象的ESBuild插件。
esbuild-plugin-lit-css - 用于将CSS文件导入为JavaScript标记模板字面量对象的ESBuild插件。
lit-css-loader - 用于将CSS文件导入为JavaScript标记模板字面量对象的Webpack加载器。
lit-scss-loader - 用于将CSS/SCSS导入Lit组件的Webpack加载器。
rollup-plugin-lit-css - 用于将CSS文件导入为JavaScript标记模板字面量对象的Rollup插件。
rollup-plugin-minify-html-literals - 用于压缩标记模板字符串中HTML的Rollup插件。
rollup-plugin-postcss-lit - 用于在Lit组件中加载经PostCSS处理的样式表的Rollup插件。