Lit может быть легко добавлен к существующим проектам:
фактически, компоненты Lit работают с любым JavaScript-фреймворком, системой сервера шаблонов и CMS.
Фактически, компонент Lit можно использовать непосредственно в HTML, с помощью DOM API или в шаблонах.
Большинство JavaScript-фреймворков имеют отличную поддержку веб-компонентов и Lit, просто импортируйте определение элемента и используйте имена тегов элемента в шаблонах.
Сначала вы устанавливаете пакет Lit из командной строки, с помощью npm:
npm i lit
Новый элемент можно создать в любой папке проекта, используя JSX.
JSX — это язык, используемый для создания шаблонов. Он является расширением синтаксиса JavaScript.
Компонент Lit — это многократно используемый фрагмент пользовательского интерфейса. Это своего рода контейнер с состоянием, который отображает пользовательский интерфейс в зависимости от своего состояния.
Он может реагировать на ввод данных пользователем, вызывать события — все, что вы можете ожидать от компонента пользовательского интерфейса.
Компонент Lit — это элемент HTML, поэтому он имеет все стандартные API элементов.
Мы создаем класс, который расширяет LitElement, и регистрируем его в браузере:
В TS декоратор @customElement — это сокращение для вызова customElements.define, который регистрирует класс пользовательского элемента в браузере и привязывает его к имени элемента (в данном случае simple-greeting).
В противном случае вы можете использовать JS:
Определяя компонент Lit, вы определяете пользовательский элемент HTML; вы можете использовать новый элемент как любой элемент HTML:
Базовый класс LitElement является подклассом HTMLElement, поэтому Lit-компонент наследует все свойства стандартных методов HTMLElement.
В частности, LitElement наследует от ReactiveElement,
который реализует реактивные свойства, и в свою очередь наследует от HTMLElement.
TypeScript определяет класс элемента HTML, возвращаемого некоторыми API DOM, на основе имени тега.
Например, мы знаем, что document.createElement (‘img’) возвращает экземпляр HTMLImageElement со свойством src типа string.
Пользовательские элементы могут получить такое же лечение, добавив сопоставление с помощью HTMLElementTagNameMap.
Таким образом, следующий код правильно выполняет проверку типов:
Хорошей идеей будет добавить запись HTMLElementTagNameMap ко всем элементам
созданным на TypeScript, и опубликовать типы .d.ts в пакете npm.
См. здесь