Lit

Lit 是一个用于构建 Web Components 的轻量级库，由 Google 开发并维护。它基于 Web Components 标准，提供了简洁的 API 来创建可复用的自定义元素。

核心特点

• 响应式属性：通过 @property() 装饰器或静态属性定义，当属性值变化时自动触发组件重新渲染。
• 声明式模板：使用 JavaScript 模板字面量编写 HTML 模板，支持表达式插值，无需额外模板语法。
• 作用域样式：利用 Shadow DOM 隔离样式，避免全局冲突。
• 轻量高效：minified + gzipped 约 5KB，更新时只修改动态部分，性能优异。

主要功能

• 创建标准自定义元素，可直接在 HTML 中使用
• 支持 TypeScript 和装饰器
• 提供多种工具和模块，如 lit-html 模板引擎和 @lit/reactive-element 响应式系统
• 兼容所有主流框架（React、Vue、Angular 等）及无框架环境

适用人群

• 前端开发者：需要构建可复用、跨框架的 UI 组件
• 设计系统团队：打造统一的组件库，适用于多框架项目
• 网站/应用开发者：渐进增强静态网站或构建完整 SPA

使用方式

通过 npm 安装 lit 包，然后创建继承 LitElement 的类。定义模板（render）和样式（styles），声明响应式属性，即可注册为自定义元素。HTML 中直接使用标签即可，也可在框架项目中集成。

注意事项

• 需要浏览器支持 Web Components（现代浏览器均支持，IE 不支持）
• 模板中使用 JavaScript 表达式，注意避免 XSS 风险，Lit 默认会转义 html 内容
• 属性命名建议使用驼峰式，HTML 属性对应 kebab-case