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

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

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

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

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

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

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

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

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

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