Рендеринг

Добавьте шаблон в компонент, чтобы определить, что он должен отображать. Шаблоны могут содержать выражения — заполнители для динамического содержимого.

Чтобы определить шаблон для компонента Lit, добавьте метод render():

Напишите шаблон на HTML внутри тегированного шаблонного литерала JavaScript, используя функцию-тег html из Lit.

Шаблоны Lit могут содержать выражения JavaScript. Выражения можно использовать для задания текстового содержимого, атрибутов, свойств и обработчиков событий. Метод render() также может содержать любой код JavaScript — например, можно создать локальные переменные для использования в выражениях.

Обычно метод render() компонента возвращает один объект TemplateResult (того же типа, что возвращает функция-тег html). Однако он может возвращать любые значения, которые Lit может отобразить как дочерний элемент HTML-элемента:

• Примитивные значения, такие как строка, число или логическое значение.
• Объекты TemplateResult, созданные функцией html.
• Узлы DOM.
• Служебные значения nothing и noChange.
• Массивы или итерируемые объекты с любыми из поддерживаемых типов.

Это почти полностью совпадает с набором значений, которые можно отображать в дочернем выражении Lit. Единственное отличие состоит в том, что дочернее выражение может отображать SVGTemplateResult, возвращаемый функцией svg. Результат такого шаблона можно отображать только как потомка элемента <svg>.

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

• Не изменяйте состояние компонента.
• Не допускайте побочных эффектов.
• Используйте в качестве входных данных только свойства компонента.
• При одинаковых значениях свойств возвращайте одинаковый результат.

Соблюдение этих рекомендаций делает шаблон детерминированным и упрощает анализ кода.

В большинстве случаев следует избегать обновления DOM вне метода render(). Вместо этого задавайте шаблон компонента как функцию его состояния и храните состояние в свойствах.

Например, если компоненту нужно обновить интерфейс при получении события, пусть обработчик события задаёт реактивное свойство, используемое в render(), а не манипулирует DOM напрямую.

Дополнительные сведения см. в разделе Реактивные свойства.

Шаблоны Lit можно составлять из других шаблонов. В следующем примере шаблон компонента <my-page> составляется из небольших шаблонов для заголовка, нижнего колонтитула и основного содержимого страницы:

В этом примере отдельные шаблоны определены как методы экземпляра, поэтому подкласс может расширить этот компонент и переопределить один или несколько шаблонов.

Шаблоны также можно составлять, импортируя другие элементы и используя их в своём шаблоне:

Lit-компонент впервые отображает свой шаблон при добавлении в DOM страницы. После первоначального рендеринга любое изменение реактивных свойств компонента запускает цикл обновления и повторный рендеринг компонента.

Lit объединяет обновления, чтобы повысить производительность и эффективность. Одновременное изменение нескольких свойств запускает только одно обновление, которое выполняется асинхронно во время микрозадачи.

Во время обновления повторно отображаются только изменившиеся части DOM. Хотя шаблоны Lit похожи на интерполяцию строк, Lit разбирает и создаёт статический HTML один раз, а затем обновляет только изменившиеся значения в выражениях, что делает обновления очень эффективными.

Подробнее о цикле обновления см. в разделе Что происходит при изменении свойств.

Lit использует теневой DOM для инкапсуляции DOM, отображаемого компонентом. Теневой DOM позволяет элементу создать собственное изолированное дерево DOM, отделённое от дерева основного документа. Это ключевая функция спецификаций веб-компонентов, которая обеспечивает совместимость, инкапсуляцию стилей и другие преимущества.

Подробнее о теневом DOM см. в статье Shadow DOM v1: автономные веб-компоненты на сайте Web Fundamentals.

Подробнее о работе с теневым DOM в компоненте см. в разделе Работа с теневым DOM.

• Теневой DOM
• Обзор шаблонов
• Выражения шаблонов

Изменить эту страницу