渲染
在您的组件中添加一个模板以定义它应该渲染的内容。模板可以包含表达式，这些表达式是动态内容的占位符。
要为 Lit 组件定义模板，请添加一个 render() 方法。
使用 Lit 的 html 标记函数，在 JavaScript 标记模板文字 中以 HTML 形式编写您的模板。
Lit 模板可以包含 JavaScript 表达式。您可以使用表达式来设置文本内容、属性、特性和事件监听器。render() 方法还可以包括任何 JavaScript - 例如，您可以创建局部变量供表达式使用。
可渲染值
指向“可渲染值”的永久链接通常，组件的 render() 方法返回单个 TemplateResult 对象（与 html 标记函数返回的类型相同）。但是，它可以返回 Lit 可以渲染为 HTML 元素子节点的任何内容。
这几乎完全相同于可以渲染到 Lit 子表达式 的值集。唯一的区别是子表达式可以渲染 SVGTemplateResult，它由 svg 函数返回。这种类型的模板结果只能渲染为 <svg> 元素的后代。
编写良好的 render() 方法
指向“编写良好的 render() 方法”的永久链接为了充分利用 Lit 的函数式渲染模型，您的 render() 方法应遵循以下准则
- 避免更改组件的状态。
- 避免产生任何副作用。
- 仅使用组件的属性作为输入。
- 在给定相同属性值时返回相同的结果。
遵循这些准则可以使模板确定性，并使代码更容易推理。
在大多数情况下，您应该避免在 render() 之外进行 DOM 更新。相反，将组件的模板表示为其状态的函数，并将它的状态捕获在属性中。
例如，如果您的组件需要在接收到事件时更新其 UI，请让事件监听器设置在 render() 中使用的响应式属性，而不是直接操作 DOM。
有关更多信息，请参阅 响应式属性。
组合模板
指向“组合模板”的永久链接您可以从其他模板组合 Lit 模板。以下示例从页面标题、页脚和主要内容的较小模板组合了名为 <my-page> 的组件的模板。
在这个示例中，单个模板被定义为实例方法，因此子类可以扩展此组件并覆盖一个或多个模板。
待办事项
将示例移动到组合部分，添加交叉引用。
您还可以通过导入其他元素并在模板中使用它们来组合模板。
模板何时渲染
指向“模板何时渲染”的永久链接Lit 组件在最初被添加到页面上的 DOM 时会渲染其模板。在初始渲染之后，组件的响应式属性的任何更改都会触发更新周期，重新渲染组件。
Lit 批量更新以最大程度地提高性能和效率。同时设置多个属性只会触发一次更新，该更新在微任务时序异步执行。
在更新期间，只会重新渲染 DOM 中发生更改的部分。尽管 Lit 模板看起来像字符串插值，但 Lit 会解析和创建静态 HTML 一次，然后仅在表达式中更新更改的值，从而使更新非常高效。
有关更新周期的更多信息，请参阅 属性更改时会发生什么。
DOM 封装
指向“DOM 封装”的永久链接Lit 使用 shadow DOM 来封装组件渲染的 DOM。Shadow DOM 允许元素创建自己的独立 DOM 树，该树与主文档树分离。它是 Web 组件规范的核心功能，可以实现互操作性、样式封装和其他优势。
有关 shadow DOM 的更多信息，请参阅 Web 基础知识上的 Shadow DOM v1: 自包含的 Web 组件。
有关在组件中使用 shadow DOM 的更多信息，请参阅 使用 shadow DOM。