UD5工具箱
核心术语与技术概念
lit-html
lit-html 是由 Polymer 项目团队开发的一个极轻量级 JavaScript 模板库，文件大小仅约 3KB（gzipped）。它使用 ES2015 的 tagged template literals 语法来定义 HTML 模板，通过高效的虚拟 DOM diff 算法实现精准的 DOM 更新。lit-html 的核心设计理念是"声明式模板 + 响应式数据绑定 + 极致性能"。它是 Lit 框架的底层核心库，也可以独立于 Lit 框架单独使用。
Tagged Template Literals（标签模板字面量）
Tagged Template Literals 是 ES2015（ES6）引入的 JavaScript 语法特性。它允许在模板字符串前添加一个标签函数（tag function），该函数会接收模板字符串的静态部分和动态表达式值作为参数。lit-html 使用 html 标签函数来解析模板字符串，将静态 HTML 部分和动态表达式部分分离，从而实现高效的模板渲染和更新。这是 lit-html 模板语法的技术基础。
html 标签函数
html 是 lit-html 提供的核心标签函数，用于定义 HTML 模板。使用语法为 html`<div>${data.name}</div>`。html 函数会解析模板字符串，识别其中的静态 HTML 部分和 ${} 中的动态表达式，返回一个 TemplateResult 对象。这个对象包含了模板的结构信息和动态部分的值，供 lit-html 的渲染引擎处理和更新 DOM。
render 函数
render 是 lit-html 提供的渲染函数，用于将 TemplateResult 渲染到指定的 DOM 容器中。使用语法为 render(html`<p>Hello</p>`, document.body)。render 函数首次调用时会创建 DOM 节点，后续调用时会进行高效的 DOM diff 并只更新变化的部分。render 函数是 lit-html 渲染流程的入口点。
nothing
nothing 是 lit-html 提供的一个特殊值，表示不渲染任何内容。当模板表达式返回 nothing 时，该位置不会渲染任何 DOM 节点。常用于条件渲染中，当条件不满足时清除已渲染的内容。例如 ${data.showContent ? html`<p>Content</p>` : nothing}，当 data.showContent 为 false 时不渲染任何内容。
repeat 指令
repeat 是 lit-html 提供的列表渲染指令，用于高效渲染数组数据。基本语法为 repeat(items, (item, index) => template)。repeat 指令内部使用了键值追踪机制，能够识别数组中元素的新增、删除和顺序变化，只更新真正发生变化的 DOM 节点。相比简单地使用 Array.map()，repeat 在处理动态列表时具有显著的性能优势。repeat 还支持可选的 keyFn 参数来指定元素的唯一标识。
when 指令
when 是 lit-html 提供的条件渲染指令。基本语法为 when(condition, trueTemplate) 或 when(condition, trueTemplate, falseTemplate)。当 condition 为真值时渲染第一个模板参数，为假值时渲染第二个模板参数（如果提供）或不渲染。when 指令比简单的三元表达式更清晰，适合表达复杂的条件渲染逻辑。
classMap 指令
classMap 是 lit-html 提供的动态 CSS 类名绑定指令。使用语法为 classMap({ className: booleanValue })。该指令根据对象中各属性的布尔值来决定是否添加对应的 CSS 类名。值为 true 的属性对应的类名会被添加，值为 false 的属性对应的类名会被移除。classMap 在需要根据数据状态动态切换样式的场景中非常实用。
styleMap 指令
styleMap 是 lit-html 提供的动态内联样式绑定指令。使用语法为 styleMap({ cssProperty: value })。该指令将对象中的属性值应用为元素的 CSS 内联样式。支持标准的 CSS 属性名（使用驼峰命名法，如 fontSize 对应 font-size）和 CSS 值（包括字符串和数字）。styleMap 在需要根据数据动态设置样式的场景中非常实用。
ifDefined 指令
ifDefined 是 lit-html 提供的条件属性绑定指令。使用语法为 ifDefined(value)。当 value 不为 undefined 时，将值设置到属性上；当 value 为 undefined 时，完全移除该属性。常用于动态绑定属性值的情况，例如 html`<a href="${ifDefined(data.url)}">`，当 data.url 为 undefined 时不会设置 href 属性。
until 指令
until 是 lit-html 提供的异步内容渲染指令。使用语法为 until(promise, placeholderTemplate)。该指令在 promise resolve 之前渲染 placeholderTemplate（占位内容），promise resolve 后渲染实际内容。until 适合渲染需要异步获取数据的场景，如网络请求结果或动态导入的组件。
choose 指令
choose 是 lit-html 提供的多条件分支渲染指令。使用语法为 choose(value, [case1, case2, ...], defaultTemplate)。类似于 switch-case 语句，根据 value 的值匹配对应的 case 并渲染相应的模板。当没有匹配的 case 时渲染 defaultTemplate。choose 适合处理多条件分支的渲染逻辑。
ref 指令
ref 是 lit-html 提供的 DOM 元素引用指令。使用语法为 ref(callback) 或使用 Ref 对象。该指令在元素创建后将 DOM 元素的引用传递给回调函数或 Ref 对象，方便开发者直接操作 DOM 元素。常用于需要直接访问底层 DOM 节点的场景，如焦点管理、尺寸测量等。
guard 指令
guard 是 lit-html 提供的依赖追踪优化指令。使用语法为 guard(dependencies, template)。该指令根据 dependencies 数组的变化来决定是否重新渲染模板。只有当 dependencies 中的值发生变化时才会重新渲染，避免不必要的重复渲染。guard 在性能优化场景中非常有用。
Lit 框架
Lit 是由 Google 开发和维护的现代 Web Components 框架。它建立在 Web 标准 API（Custom Elements、Shadow DOM）之上，以 lit-html 为模板引擎，提供了声明式的组件开发体验。Lit 框架包括三个核心包：lit（主框架包，包含 LitElement 基类和 lit-html）、LitElement（Web Component 基类，提供响应式属性和生命周期管理）和 lit-html（模板渲染引擎）。
LitElement
LitElement 是 Lit 框架中用于创建 Web Components 的基类。开发者通过继承 LitElement 来创建自定义元素。LitElement 提供了响应式属性系统（通过 static properties 或 @property 装饰器定义）、Shadow DOM 封装、生命周期回调（connectedCallback、disconnectedCallback、updated 等）以及更新调度机制。LitElement 使用 lit-html 作为默认的模板渲染引擎。
零虚拟 DOM
lit-html 采用的"零虚拟 DOM"架构意味着它不维护一棵完整的虚拟 DOM 树。与 React 的虚拟 DOM 机制不同，lit-html 直接在真实 DOM 上进行操作，通过对比模板的静态部分和动态表达式的值来确定需要更新的 DOM 节点。这种方式减少了内存开销和 diff 计算量，是 lit-html 实现高性能渲染的关键设计之一。
模板语法要点
lit-html 模板语法的几个关键要点包括：表达式绑定使用 ${} 语法，可以绑定文本、属性、元素和注释；事件绑定使用 @eventName 语法（如 @click）；属性绑定使用 .propName 语法（如 .value）；布尔属性绑定使用 ?attrName 语法（如 ?disabled）；嵌套模板直接在模板中使用 ${} 嵌套其他 html 模板；条件渲染使用 when 指令或三元表达式；列表渲染使用 repeat 指令；返回 nothing 清除渲染内容。