コンポーネントの定義

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は、特定の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型定義を公開することをお勧めします。

このページを編集