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

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

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

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

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

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

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

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

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

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