模板概述

Lit 模板使用带有 html 标签的 JavaScript 模板字面量编写。模板字面量的内容基本上是普通的、声明式的 HTML：

html`<h1>Hello ${name}</h1>`

模板语法看起来可能只是在做字符串插值。但实际上，对于带标签的模板字面量，浏览器会将一组字符串（模板的静态部分）和一组表达式（动态部分）传递给标签函数。Lit 利用这一点来构建模板的高效表示，从而只重新渲染模板中发生变化的部分。

Lit 模板具有极强的表达能力，允许你通过多种方式渲染动态内容：

• 表达式：模板可以包含称为表达式的动态值，可用于渲染属性、文本、属性、事件处理器，甚至其他模板。
• 条件渲染：表达式可以使用标准 JavaScript 流程控制来渲染条件内容。
• 列表渲染：通过标准 JavaScript 循环和数组技巧将数据转换为模板数组来渲染列表。
• 内置指令：指令是可以扩展 Lit 模板功能的函数。该库包含一组内置指令，以帮助满足各种渲染需求。
• 自定义指令：你也可以根据需要编写自己的指令来自定义 Lit 的渲染行为。

你也可以在 Lit 组件之外独立使用 Lit 的模板库。详情请参阅独立的 lit-html 模板。