渲染

为你的组件添加模板来定义它应该渲染什么。模板可以包含表达式，这些表达式是动态内容的占位符。

要为 Lit 组件定义模板，添加一个 render() 方法：

使用 Lit 的 html 标签函数，在 JavaScript 标记模板字面量中用 HTML 编写你的模板。

Lit 模板可以包含 JavaScript 表达式。你可以使用表达式来设置文本内容、特性、属性和事件监听器。render() 方法也可以包含任何 JavaScript——例如，你可以创建用于表达式的局部变量。

通常，组件的 render() 方法返回一个单独的 TemplateResult 对象（与 html 标签函数返回的类型相同）。但是，它可以返回任何 Lit 可以作为 HTML 元素子项渲染的内容：

• 像字符串、数字或布尔值这样的原始值。
• 由 html 函数创建的 TemplateResult 对象。
• DOM 节点。
• 哨兵值 nothing 和 noChange。
• 任何支持类型的数组或可迭代对象。

这与可以渲染到 Lit 子表达式的值集几乎相同。唯一的区别是子表达式可以渲染由 svg 函数返回的 SVGTemplateResult。这种模板结果只能作为 <svg> 元素的后代渲染。

要充分利用 Lit 的函数式渲染模型，你的 render() 方法应该遵循这些准则：

• 避免改变组件的状态。
• 避免产生任何副作用。
• 仅使用组件的属性作为输入。
• 给定相同的属性值时返回相同的结果。

遵循这些准则可以保持模板的确定性，并使代码更容易理解。

在大多数情况下，你应该避免在 render() 之外进行 DOM 更新。相反，将组件的模板表达为其状态的函数，并在属性中捕获其状态。

例如，如果你的组件需要在接收到事件时更新其 UI，让事件监听器设置一个在 render() 中使用的响应式属性，而不是直接操作 DOM。

更多信息，请参见响应式属性。

你可以从其他模板组合 Lit 模板。以下示例从页面的页眉、页脚和主要内容的较小模板组合了一个名为 <my-page> 的组件的模板：

在这个示例中，各个模板被定义为实例方法，因此子类可以扩展这个组件并覆盖一个或多个模板。

你也可以通过导入其他元素并在模板中使用它们来组合模板：

Lit 组件在首次添加到页面的 DOM 中时渲染其模板。初始渲染之后，对组件的响应式属性的任何更改都会触发更新周期，重新渲染组件。

Lit 批量处理更新以最大化性能和效率。一次设置多个属性只会触发一次更新，该更新在微任务时序异步执行。

在更新期间，只有 DOM 中发生变化的部分才会重新渲染。虽然 Lit 模板看起来像字符串插值，但 Lit 只解析并创建一次静态 HTML，之后只更新表达式中变化的值，使更新非常高效。

关于更新周期的更多信息，请参见属性变化时会发生什么。

Lit 使用 shadow DOM 来封装组件渲染的 DOM。Shadow DOM 允许元素创建自己的独立 DOM 树，该树与主文档树分开。这是 Web Components 规范的核心特性，它实现了互操作性、样式封装和其他好处。

关于 shadow DOM 的更多信息，请参见 Web Fundamentals 上的 Shadow DOM v1: Self-Contained Web Components。

关于在你的组件中使用 shadow DOM 的更多信息，请参见使用 shadow DOM。

• Shadow DOM
• 模板概述
• 模板表达式