Шаблоны

Интерпретирует шаблонный литерал как 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.

Отрисовывает значение, обычно TemplateResult из lit-html, в контейнере.

Импорт

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}.

Подробности

В этом примере текст «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 или элементов, которые будут находиться внутри 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. Дополнительные сведения см. в разделе Отрисовка.