レンダリング

コンポーネントがレンダリングする内容を定義するために、テンプレートをコンポーネントに追加します。テンプレートには、動的コンテンツのプレースホルダーである式を含めることができます。

Litコンポーネントのテンプレートを定義するには、render()メソッドを追加します。

Litのhtmlタグ関数を使用して、JavaScriptのタグ付きテンプレートリテラル内にHTMLでテンプレートを記述します。

Litテンプレートには、JavaScriptの式を含めることができます。式を使用して、テキストコンテンツ、属性、プロパティ、およびイベントリスナーを設定できます。render()メソッドには任意のJavaScriptを含めることもできます。たとえば、式で使用するローカル変数を作成できます。

レンダリング可能な値

「レンダリング可能な値」へのパーマリンク

通常、コンポーネントのrender()メソッドは、単一のTemplateResultオブジェクト（htmlタグ関数によって返されるものと同じ型）を返します。ただし、LitがHTML要素の子としてレンダリングできるものなら何でも返すことができます。

文字列、数値、またはブール値などのプリミティブ値。
html関数によって作成されたTemplateResultオブジェクト。
DOMノード。
番兵の値であるnothingとnoChange。
サポートされている型の配列またはイテラブル。

これは、Litの子式にレンダリングできる値のセットとほぼ同じです。1つの違いは、子式がsvg関数によって返されるSVGTemplateResultをレンダリングできることです。この種のテンプレートの結果は、<svg>要素の子孫としてのみレンダリングできます。

適切な render() メソッドの記述

「適切な render() メソッドの記述」へのパーマリンク

Litの関数型レンダリングモデルを最大限に活用するには、render()メソッドが次のガイドラインに従う必要があります。

コンポーネントの状態を変更しない。
副作用を生じさせない。
コンポーネントのプロパティのみを入力として使用する。
同じプロパティ値が与えられた場合は、同じ結果を返す。

これらのガイドラインに従うことで、テンプレートが決定論的になり、コードについて推論しやすくなります。

ほとんどの場合、render()の外部でDOMを更新することは避ける必要があります。代わりに、コンポーネントのテンプレートをその状態の関数として表現し、その状態をプロパティにキャプチャします。

たとえば、コンポーネントがイベントを受信したときにUIを更新する必要がある場合は、DOMを直接操作するのではなく、render()で使用されるリアクティブなプロパティをイベントリスナーに設定させます。

詳細については、リアクティブなプロパティを参照してください。

テンプレートの構成

「テンプレートの構成」へのパーマリンク

Litテンプレートは、他のテンプレートから構成できます。次の例では、ページのヘッダー、フッター、およびメインコンテンツの小さいテンプレートから、<my-page>というコンポーネントのテンプレートを構成します。

この例では、個々のテンプレートはインスタンスメソッドとして定義されているため、サブクラスはこのコンポーネントを拡張し、1つ以上のテンプレートをオーバーライドできます。

TODO

例をコンポジションセクションに移動し、相互参照を追加します。

他の要素をインポートして、テンプレートで使用してテンプレートを構成することもできます。

テンプレートがレンダリングされるとき

「テンプレートがレンダリングされるとき」へのパーマリンク

Litコンポーネントは、ページ上のDOMに追加されたときに、最初にテンプレートをレンダリングします。最初のレンダリング後、コンポーネントのリアクティブなプロパティへの変更は、更新サイクルをトリガーし、コンポーネントを再レンダリングします。

Litは、パフォーマンスと効率を最大化するために更新をバッチ処理します。複数のプロパティを一度に設定すると、マイクロタスクのタイミングで非同期に実行される更新が1つだけトリガーされます。

更新中は、変更されたDOMの部分のみが再レンダリングされます。Litテンプレートは文字列補間のように見えますが、Litは静的HTMLを一度解析して作成し、その後は式の変更された値のみを更新するため、更新が非常に効率的です。

更新サイクルの詳細については、プロパティが変更されたときに何が起こるかを参照してください。

DOMのカプセル化

「DOMのカプセル化」へのパーマリンク

Litは、コンポーネントがレンダリングするDOMをカプセル化するためにシャドウDOMを使用します。シャドウDOMを使用すると、要素はメインドキュメントツリーとは別の、独自の分離されたDOMツリーを作成できます。これは、相互運用性、スタイルのカプセル化、およびその他の利点を実現するWebコンポーネント仕様の中核となる機能です。

シャドウDOMの詳細については、Web FundamentalsのシャドウDOM v1：自己完結型Webコンポーネントを参照してください。

コンポーネントでシャドウDOMを操作する方法の詳細については、シャドウDOMの操作を参照してください。