渲染

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

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

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

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

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

• 原始值，如 string、number 或 boolean。
• 由 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 组件规范的核心特性，实现了互操作性、样式封装等好处。

有关 Shadow DOM 的更多信息，请参阅 Web Fundamentals 上的 Shadow DOM v1：自包含的 Web 组件。

有关在组件中使用 Shadow DOM 的更多信息，请参阅使用 Shadow DOM。

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