独立使用 lit-html

Lit 将 LitElement 的组件模型与基于 JavaScript 模板字面量的渲染结合成一个易于使用的包。然而，Lit 的模板部分被分解为一个名为 lit-html 的独立库，它可以在 Lit 组件模型之外的任何需要高效渲染和更新 HTML 的地方使用。

lit-html 包可以与 lit 分开安装：

npm install lit-html

主要导入是 html 和 render：

import {html, render} from 'lit-html';

独立的 lit-html 包还包括完整 Lit 开发者指南中描述的以下功能的模块：

• lit-html/directives/* - 内置指令
• lit-html/directive.js - 自定义指令
• lit-html/async-directive.js - 自定义异步指令
• lit-html/directive-helpers.js - 用于命令式更新的指令辅助函数
• lit-html/static.js - 静态 html 标签
• lit-html/polyfill-support.js - 支持与 Web 组件 polyfills 的接口（参见 样式和 lit-html 模板）

Lit 模板使用带有 html 标签的 JavaScript 模板字面量编写。字面量的内容大多是普通的声明式 HTML，可能包含表达式来插入和更新模板的动态部分（完整的 Lit 模板语法参考见 模板）。

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

lit-html 模板表达式不会导致任何 DOM 被创建或更新。它只是 DOM 的一个描述，称为 TemplateResult。要实际创建或更新 DOM，你需要将 TemplateResult 传递给 render() 函数，以及要渲染到的容器：

import {html, render} from 'lit-html';

const name = 'world';
const sayHi = html`<h1>Hello ${name}</h1>`;
render(sayHi, document.body);

要使你的模板动态化，你可以创建一个_模板函数_。每当你的数据发生变化时，调用模板函数。

import {html, render} from 'lit-html';

// 定义一个模板函数
const myTemplate = (name) => html`<div>Hello ${name}</div>`;

// 用一些数据渲染模板
render(myTemplate('earth'), document.body);

// ... 稍后 ...
// 用不同的数据渲染模板
render(myTemplate('mars'), document.body);

当你调用模板函数时，lit-html 会捕获当前的表达式值。模板函数不会创建任何 DOM 节点，所以它快速且开销小。

模板函数返回一个包含模板和输入数据的 TemplateResult。这是使用 lit-html 背后的主要原则之一：将 UI 创建为状态的_函数_。

当你调用 render 时，lit-html 只更新自上次渲染以来已更改的模板部分。 这使得 lit-html 更新非常快速。

render 方法还接受一个 options 参数，允许你指定以下选项：

• host：调用用 @eventName 语法注册的事件监听器时使用的 this 值。此选项仅适用于你将事件监听器指定为普通函数时。如果你使用事件监听器对象指定事件监听器，则监听器对象用作 this 值。有关事件监听器的更多信息，请参阅 事件监听器表达式。

• renderBefore：容器内的可选引用节点，lit-html 将在其之前进行渲染。默认情况下，lit-html 将附加到容器的末尾。设置 renderBefore 允许渲染到容器内的特定位置。

• creationScope：当克隆模板时，lit-html 将在其上调用 importNode 的对象（默认为 document）。这是为高级用例提供的。

例如，如果你是独立使用 lit-html，你可能会这样使用渲染选项：

<div id="container">
  <header>My Site</header>
  <footer>Copyright 2021</footer>
</div>

const template = () => html`...`;
const container = document.getElementById('container');
const renderBefore = container.querySelector('footer');
render(template(), container, {renderBefore});

上面的例子会在 <header> 和 <footer> 元素之间渲染模板。

lit-html 专注于一件事：渲染 HTML。如何将样式应用于 lit-html 创建的 HTML 取决于你如何使用它——例如，如果你在 LitElement 之类的组件系统中使用 lit-html，你可以遵循该组件系统使用的模式。

一般来说，如何给 HTML 添加样式将取决于你是否使用 shadow DOM：

• 如果你不是渲染到 shadow DOM，你可以使用全局样式表给 HTML 添加样式。
• 如果你是渲染到 shadow DOM，那么你可以在 shadow root 内渲染 <style> 标签。

为了帮助动态样式，lit-html 提供了两个用于操作元素的 class 和 style 属性的指令：

• classMap 根据对象的属性在元素上设置类。
• styleMap 根据样式属性和值的映射在元素上设置样式。