Рендеринг

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

Чтобы задать шаблон для компонента 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 см. в статье Теневой DOM v1: автономные веб-компоненты на сайте Web Fundamentals.

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

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

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