Шаблоны

Интерпретирует шаблонный литерал как 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 TemplateResult}, созданное вычислением тег-функции, например {@linkcode html} или {@linkcode svg}.

container

HTMLElement | DocumentFragment

Контейнер DOM, в который выполняется отрисовка. При первой отрисовке отображаемое значение добавляется в контейнер, а при последующих отрисовках оно эффективно обновляется, если ранее в этом контейнере отображался результат того же типа.

options?

RenderOptions

Документацию по параметрам см. в разделе {@linkcode RenderOptions}.

Подробности

В этом примере текст «Привет, 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-фрагментов или элементов, которые будут находиться внутри HTML-элемента <svg>. Частая ошибка — помещать элемент <svg> в шаблон с тег-функцией svg. Элемент <svg> является HTML-элементом, поэтому его следует использовать в шаблоне с тег-функцией html. При использовании LitElement недопустимо возвращать SVG-фрагмент из метода render(), поскольку SVG-фрагмент будет находиться в теневом корне элемента и, следовательно, не сможет использоваться внутри HTML-элемента <svg>.

Используется для очистки любого значения перед его записью в DOM. Это можно применять для реализации политики безопасности, определяющей разрешённые и запрещённые значения, чтобы предотвращать XSS-атаки.

Импорт

import { SanitizerFactory } from 'lit';

Тип

Подробности

Один из способов использования этого обратного вызова — проверять атрибуты и свойства по списку полей высокого риска и требовать, чтобы значения, записываемые в такие поля, были экземплярами класса, безопасного по своей конструкции. Safe HTML Types из Closure — одна из реализаций этой техники (https://github.com/google/safe-html-types/blob/master/doc/safehtml-types.md). Для этой техники также можно использовать полифил TrustedTypes в режиме только API (https://github.com/WICG/trusted-types).

Импорт

import { SVGTemplateResult } from 'lit';

Тип

Тип возвращаемого значения тег-функций шаблонов, html и svg.

Импорт

import { TemplateResult } from 'lit';

Тип

Подробности

Объект TemplateResult содержит всю информацию о выражении шаблона, необходимую для его отрисовки: строки шаблона, значения выражений и тип шаблона (html или svg). Объекты TemplateResult сами по себе не создают DOM. Чтобы создать или обновить DOM, необходимо отрисовать TemplateResult. Дополнительную информацию см. в разделе Отрисовка.