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

Определите компонент 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-пакет.

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