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

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

1
2
3
4

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

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

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

1
2
3
4

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

Компонент Lit — это элемент HTML¶

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

1

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

1

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

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

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

Обеспечение хороших типизаций TypeScript¶

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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

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

Благодаря этому следующий код правильно проверяет тип:

1
2

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

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

Комментарии