模板

将模板字面量解释为 HTML 模板，可以有效地渲染到容器并更新容器。

导入

import { html } from 'lit';

签名

html(strings, values): TemplateResult<1>

参数

strings

TemplateStringsArray

values

Array<unknown>

详情

const header = (title: string) => html`<h1>${title}</h1>`;

html 标签返回一个 DOM 渲染描述作为值。它很懒惰，意味着在模板渲染之前不会执行任何操作。渲染时，如果模板来自与之前渲染结果相同的表达式，则会有效地更新它而不是替换它。

一个哨兵值，它向 ChildPart 发出完全清除其内容的信号。

导入

import { nothing } from 'lit';

类型

详情

const button = html`${
 user.isAdmin
   ? html`<button>DELETE</button>`
   : nothing
}`;

建议使用 nothing 而不是其他假值，因为它在各种表达式绑定上下文中提供了一致的行为。在子表达式中，undefined、null、'' 和 nothing 都会表现相同，并且不渲染任何节点。在属性表达式中，nothing 会删除属性，而 undefined 和 null 将渲染一个空字符串。在属性表达式中，nothing 将变为 undefined。

将一个值（通常是 lit-html TemplateResult）渲染到容器中。

导入

import { render } from 'lit';

签名

render(value, container, options?): RootPart

参数

value

unknown

任何 可渲染值，通常是通过评估模板标记（如 {@linkcode html} 或 {@linkcode svg}）创建的 {@linkcode TemplateResult}。

container

HTMLElement | DocumentFragment

要渲染到的 DOM 容器。第一次渲染将渲染的值附加到容器，后续渲染如果在该处之前渲染了相同的结果类型，则会有效地更新渲染的值。

options?

RenderOptions

有关选项文档，请参阅 {@linkcode RenderOptions}。

详情

此示例在段落标签内渲染文本“Hello, Zoe！”，并将其附加到容器 document.body 中。

import {html, render} from 'lit';
const name = "Zoe";
render(html`<p>Hello, ${name}!</p>`, document.body);

将模板字面量解释为 SVG 片段，可以有效地渲染到容器并更新容器。

导入

import { svg } from 'lit';

签名

svg(strings, values): TemplateResult<2>

参数

strings

TemplateStringsArray

values

Array<unknown>

详情

const rect = svg`<rect width="10" height="10"></rect>`;
const myImage = html`
  <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
    ${rect}
  </svg>`;

svg 标签函数应仅用于 SVG 片段，或在 <svg> HTML 元素内部包含的元素。常见错误是在用 svg 标签函数标记的模板中放置 <svg> 元素。<svg> 元素是 HTML 元素，应在用 html 标签函数标记的模板中使用。在 LitElement 使用中，从 render() 方法返回 SVG 片段是无效的，因为 SVG 片段将包含在元素的 Shadow Root 中，因此不能在 <svg> HTML 元素中使用。

用于在将任何值写入 DOM 之前对其进行清理。这可以用来实现允许和不允许值的安全性策略，以防止 XSS 攻击。

导入

import { SanitizerFactory } from 'lit';

类型

详情

使用此回调的一种方法是根据高风险字段列表检查属性和属性，并要求写入此类字段的值为按构造安全的类的实例。Closure 的安全 HTML 类型是此技术的实现方式之一（ https://github.com/google/safe-html-types/blob/master/doc/safehtml-types.md）。API 仅模式下的 TrustedTypes polyfill 也可以用作此技术的依据 (https://github.com/WICG/trusted-types）。

导入

import { SVGTemplateResult } from 'lit';

类型

模板标记函数 html 和 svg 的返回值类型。

导入

import { TemplateResult } from 'lit';

类型

详情

TemplateResult 对象保存渲染模板表达式所需的所有信息：模板字符串、表达式值和模板类型（html 或 svg）。TemplateResult 对象不会自行创建任何 DOM。要创建或更新 DOM，您需要渲染 TemplateResult。有关详细信息，请参阅 渲染。