Шаблоны

Интерпретирует шаблонную строку как шаблон HTML, который можно эффективно отрисовать в контейнере и обновлять.

Импорт

import { html } from 'lit-html';

Сигнатура

html(strings, values): TemplateResult

Параметры

strings

TemplateStringsArray

values

Array<unknown>

Специальное значение, которое указывает NodePart полностью очистить содержимое.

Импорт

import { nothing } from 'lit-html';

Тип

Отрисовывает результат шаблона или другое значение в контейнере.

Импорт

import { render } from 'lit-html';

Сигнатура

render(result, container, options?): void

Параметры

result

unknown

Любое значение, которое можно отрисовать с помощью NodePart — обычно TemplateResult, созданный при вычислении тега шаблона, например html или svg.

container

Element | DocumentFragment

Родительский элемент DOM, в котором выполняется отрисовка. Всё его содержимое либо заменяется, либо эффективно обновляется, если ранее в нём был отрисован результат того же типа.

options?

Partial<RenderOptions>

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

Подробнее

Чтобы обновить контейнер новыми значениями, повторно вычислите шаблонную строку и вызовите render с новым результатом.

Интерпретирует шаблонную строку как шаблон SVG, который можно эффективно отрисовать в контейнере и обновлять.

Импорт

import { svg } from 'lit-html';

Сигнатура

svg(strings, values): SVGTemplateResult

Параметры

strings

TemplateStringsArray

values

Array<unknown>

TemplateResult для фрагментов SVG.

Импорт

import { SVGTemplateResult } from 'lit-html';

Подробнее

Этот класс оборачивает HTML в элемент <svg>, чтобы разобрать его содержимое в пространстве имён SVG, а затем изменяет шаблон, удаляя элемент <svg>, чтобы клоны содержали только исходный фрагмент.

Тип возвращаемого значения html, содержащий шаблон и значения интерполированных выражений.

Импорт

import { TemplateResult } from 'lit-html';

Импорт

import { RenderOptions } from 'lit-html';