Обзор компонентов¶

Компонент Lit — это многократно используемая часть пользовательского интерфейса. Вы можете рассматривать Lit-компонент как контейнер, который имеет некоторое состояние и отображает пользовательский интерфейс на основе своего состояния. Он также может реагировать на ввод пользователя, вызывать события — все, что вы ожидаете от компонента пользовательского интерфейса. Кроме того, компонент Lit — это элемент HTML, поэтому ему доступны все стандартные API элементов.

Создание компонента Lit включает в себя несколько концепций:

• Определение компонента. Компонент Lit реализуется как заказной элемент, зарегистрированный в браузере.

• Рендеринг. У компонента есть метод render, который вызывается для рендеринга содержимого компонента. В методе render вы определяете шаблон для компонента.

• Реактивные свойства. Свойства хранят состояние компонента. Изменение одного или нескольких реактивных свойств компонента запускает цикл обновления, перерисовывая компонент.

• Стилизация. Компонент может определять инкапсулированные стили для управления своим внешним видом.

• Жизненный цикл. Lit определяет набор обратных вызовов, которые вы можете переопределить, чтобы подключиться к жизненному циклу компонента — например, чтобы запускать код при добавлении элемента на страницу или при обновлении компонента.

Вот пример компонента:

Комментарии