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

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

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

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

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

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

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

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