Рендеринг¶

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

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

Запишите свой шаблон в HTML внутри JavaScript tagged template literal с помощью функции тегов Lit html.

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

Рендерируемые значения¶

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

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

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

Написание хорошего метода render()¶

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

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

Следование этим рекомендациям позволяет сохранить детерминированность шаблона и облегчает рассуждения о коде.

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

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

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

Составление шаблонов¶

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

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

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

Когда отображаются шаблоны¶

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

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

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

Более подробную информацию о цикле обновления можно найти в разделе Что происходит при изменении свойств.

Инкапсуляция DOM¶

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

Дополнительные сведения о теневом DOM см. в разделе Shadow DOM v1: Self-Contained Web Components на сайте Web Fundamentals.

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