Введение

lit-html — это простая, современная, безопасная, компактная и быстрая библиотека шаблонов HTML для JavaScript.

lit-html позволяет создавать шаблоны HTML в JavaScript с помощью шаблонных строк со встроенными выражениями JavaScript. lit-html определяет статические и динамические части шаблонов, чтобы эффективно обновлять только изменившиеся фрагменты.

Создаёте компоненты? lit-html не привязана к какой-либо модели компонентов: она предназначена только для создания и обновления DOM. Если вы хотите создавать компоненты, ознакомьтесь с LitElement — библиотекой для создания веб-компонентов с использованием шаблонов lit-html.

Шаблоны lit-html — это помеченные шаблонные строки: они похожи на строки JavaScript, но заключены в обратные кавычки (`), а не в кавычки, и помечены тегом html из lit-html:

html`<h1>Hello ${name}</h1>`

Поскольку в шаблоны lit-html почти всегда нужно подставлять данные из значений JavaScript и обеспечивать обновление DOM при изменении этих данных, обычно их создают внутри функций, которые принимают данные и возвращают шаблон lit-html. Такую функцию можно вызывать многократно:

let myTemplate = (data) => html`
  <h1>${data.title}</h1>
  <p>${data.body}</p>`;

lit-html выполняет рендеринг лениво. При вызове этой функции шаблонная строка обрабатывается с помощью тега html lit-html, а функция возвращает TemplateResult — запись шаблона для рендеринга и данных, необходимых для его отображения. TemplateResults очень легко создавать, и никакая реальная работа не выполняется, пока они не будут отрисованы в DOM.

Чтобы отрисовать TemplateResult, вызовите функцию render(), передав ей результат и контейнер DOM для рендеринга:

const result = myTemplate({title: 'Hello', body: 'lit-html is cool'});
render(result, document.body);

Хотите попробовать сами? Перейдите к разделу Начало работы.

Редактировать эту страницу