Обзор шаблонов

Шаблоны Lit написаны с использованием шаблонных литералов JavaScript с тегом html. Содержимое литерала — преимущественно обычный декларативный HTML:

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

Синтаксис шаблонов может выглядеть так, будто вы просто выполняете интерполяцию строк. Но при использовании тегированных шаблонных литералов браузер передаёт тег-функции массив строк (статические части шаблона) и массив выражений (динамические части). Lit использует это, чтобы создать эффективное представление шаблона и повторно отображать только те его части, которые изменились.

Шаблоны Lit обладают широкими возможностями и позволяют отображать динамическое содержимое разными способами:

• Выражения: Шаблоны могут содержать динамические значения, называемые выражениями, которые можно использовать для отображения атрибутов, текста, свойств, обработчиков событий и даже других шаблонов.
• Условные конструкции: Выражения могут отображать условное содержимое с помощью стандартных средств управления потоком выполнения JavaScript.
• Списки: Создавайте списки, преобразуя данные в массивы шаблонов с помощью стандартных циклов и методов работы с массивами JavaScript.
• Встроенные директивы: Директивы — это функции, расширяющие возможности шаблонов Lit. Библиотека содержит набор встроенных директив, которые помогают решать различные задачи отображения.
• Пользовательские директивы: Вы также можете написать собственные директивы, чтобы при необходимости настроить отображение в Lit.

Библиотеку шаблонов Lit можно также использовать отдельно, вне компонента Lit. Подробности см. в разделе Автономные шаблоны lit-html.

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