コンポーネントの概要
Litコンポーネントは、再利用可能なUIの要素です。Litコンポーネントは、状態を持ち、その状態に基づいてUIを表示するコンテナと考えることができます。また、ユーザーの入力に反応したり、イベントを発行したりなど、UIコンポーネントが行うことが期待されるあらゆることを実行できます。そして、LitコンポーネントはHTML要素であるため、標準的な要素APIをすべて備えています。
Litコンポーネントの作成には、いくつかの概念が関わります。
コンポーネントの定義。Litコンポーネントは、ブラウザに登録されたカスタム要素として実装されます。
レンダリング。コンポーネントには、コンポーネントの内容をレンダリングするために呼び出されるrenderメソッドがあります。renderメソッドでは、コンポーネントのテンプレートを定義します。
リアクティブプロパティ。プロパティは、コンポーネントの状態を保持します。コンポーネントのリアクティブプロパティの1つ以上を変更すると、更新サイクルがトリガーされ、コンポーネントが再レンダリングされます。
スタイル。コンポーネントは、独自の表示を制御するためにカプセル化されたスタイルを定義できます。
ライフサイクル。Litは、要素がページに追加されたときや、コンポーネントが更新されるたびにコードを実行するなど、コンポーネントのライフサイクルにフックするためにオーバーライドできる一連のコールバックを定義します。
サンプルコンポーネントを次に示します
この例では、TypeScriptデコレーターを使用しています。
デコレーターのTypeScriptの設定に関する詳細については、デコレーターのドキュメントを参照してください。