使用独立的 lit-html

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

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';

// Define a template function
const myTemplate = (name) => html`<div>Hello ${name}</div>`;

// Render the template with some data
render(myTemplate('earth'), document.body);

// ... Later on ...
// Render the template with different data
render(myTemplate('mars'), document.body);

当您调用模板函数时，lit-html 会捕获当前表达式的值。模板函数不会创建任何 DOM 节点，因此它速度很快，开销很低。

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

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

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

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

• renderBefore：可选的引用节点，位于 container 中，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 根据样式属性和值的映射在元素上设置样式。

编辑此页面