定義元件

藉由建立一個繼承 LitElement 的類別，並將您的類別註冊到瀏覽器中，來定義一個 Lit 元件。

@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 元素

“Lit 元件是一個 HTML 元素” 的永久連結

當您定義一個 Lit 元件時，您正在定義一個自訂 HTML 元素。因此，您可以使用這個新元素，就像使用任何內建元素一樣。

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

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

LitElement 基底類別是 HTMLElement 的子類別，因此 Lit 元件繼承了所有標準的 HTMLElement 屬性和方法。

具體來說，LitElement 繼承自 ReactiveElement，後者實現了響應式屬性，進而繼承自 HTMLElement。

Inheritance diagram showing LitElement inheriting from ReactiveElement, which in turn inherits from HTMLElement. LitElement is responsible for templating; ReactiveElement is responsible for managing reactive properties and attributes; HTMLElement is the standard DOM interface shared by all native HTML elements and custom elements.

提供良好的 TypeScript 類型

“提供良好的 TypeScript 類型” 的永久連結

TypeScript 會根據標籤名稱，從某些 DOM API 返回的 HTML 元素的類別。例如，document.createElement('img') 會返回一個具有 src: string 屬性的 HTMLImageElement 實例。

自訂元素可以透過如下方式添加到 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;

我們建議為所有使用 TypeScript 撰寫的元素添加一個 HTMLElementTagNameMap 條目，並確保您在 npm 套件中發布您的 .d.ts 類型。

編輯此頁面