Определение компонента

Определите компонент Lit, создав класс, расширяющий LitElement, и зарегистрировав его в браузере:

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement { /* ... */ }

Декоратор @customElement — это сокращённая запись вызова customElements.define, который регистрирует класс пользовательского элемента в браузере и связывает его с именем элемента (в данном случае — simple-greeting).

Если вы используете JavaScript или не используете декораторы, можно напрямую вызвать define():

export class SimpleGreeting extends LitElement { /* ... */  }
customElements.define('simple-greeting', SimpleGreeting);

Определяя компонент Lit, вы определяете пользовательский элемент HTML. Поэтому новый элемент можно использовать так же, как любой встроенный элемент:

<simple-greeting name="Markup"></simple-greeting>

const greeting = document.createElement('simple-greeting');

Базовый класс LitElement является подклассом HTMLElement, поэтому компонент Lit наследует все стандартные свойства и методы HTMLElement.

В частности, LitElement наследуется от ReactiveElement, который реализует реактивные свойства и, в свою очередь, наследуется от HTMLElement.

TypeScript определяет класс HTML-элемента, возвращаемого некоторыми API DOM, по имени тега. Например, document.createElement('img') возвращает экземпляр HTMLImageElement со свойством src: string.

Для пользовательских элементов можно добиться такого же поведения, добавив запись в HTMLElementTagNameMap следующим образом:

@customElement('my-element')
export class MyElement extends LitElement {
  @property({type: Number})
  aNumber: number = 5;
  /* ... */
}

declare global {
  interface HTMLElementTagNameMap {
    "my-element": MyElement;
  }
}

После этого следующий код проходит проверку типов:

const myElement = document.createElement('my-element');
myElement.aNumber = 10;

Мы рекомендуем добавлять запись HTMLElementTagNameMap для всех элементов, написанных на TypeScript, и публиковать описания типов .d.ts в вашем npm-пакете.

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