Lit 速查
共 25 条 Lit 常用写法，涵盖基础、属性与状态、事件、样式与插槽、进阶。 支持搜索与分类筛选，点击即可复制。
基础
标准 Web Components 的轻量封装。
| 命令 | 说明 |
|---|---|
| 安装 | |
| 引入 | |
| 定义自定义元素 | |
| 渲染模板 | |
| 使用 |
属性与状态
声明式响应。
| 命令 | 说明 |
|---|---|
| 公开属性（可被外部设置） | |
| 带类型转换 | |
| 私有响应式状态 | |
| 自动更新 | |
| 生命周期 |
事件
监听与派发。
| 命令 | 说明 |
|---|---|
| 绑定事件 | |
| 派发自定义事件 | |
| 普通事件 | |
| 跨边界 | |
| 外部监听 |
样式与插槽
Shadow DOM。
| 命令 | 说明 |
|---|---|
| 组件级样式（隔离） | |
| 默认插槽 | |
| 具名插槽 | |
| 样式定制的口子 | |
| 主题变量 |
进阶
指令与生态。
| 命令 | 说明 |
|---|---|
| 列表渲染 | |
| repeat 指令 | |
| 常用指令 | |
| React/SSR 集成 | |
| 可移植 |
使用说明
Lit 常用写法速查：基础、属性与状态、事件、样式与插槽、进阶；支持搜索与分类筛选，点击即可复制。
- 按用途点分类：基础、属性与状态、事件、样式与插槽、进阶。
- 点「写法」列复制，替换元素名与属性后使用。
- 对外属性用 @property，内部状态用 @state，变化会自动重渲染。
- 事件需跨 shadow 边界时设 composed: true。
常见问题
- Lit 和 React/Vue 的区别？
- Lit 基于原生 Web Components，组件是真正的自定义元素，可跨框架复用、样式天然隔离；用模板字符串而非 JSX。
- @property 和 @state 有什么不同？
- @property 是对外公开的可观察属性（可被外部设置并触发更新），@state 是内部响应式状态，仅组件内部使用。
- 自定义事件为什么有时外面收不到？
- shadow DOM 会阻断事件冒泡，派发事件时设置 composed: true 才能穿透边界；必要时再设 bubbles: true 向上冒泡。