テンプレートの概要

Litテンプレートは、htmlタグでタグ付けされたJavaScriptテンプレートリテラルを使用して記述されます。リテラルの内容は、ほとんどがプレーンな、宣言型のHTMLです。

html`<h1>Hello ${name}</h1>`

テンプレート構文は、単に文字列補間を行っているように見えるかもしれません。しかし、タグ付きテンプレートリテラルを使用すると、ブラウザはタグ関数に文字列の配列（テンプレートの静的部分）と式の配列（テンプレートの動的部分）を渡します。Litはこれを使用してテンプレートの効率的な表現を構築し、変更されたテンプレートの部分のみを再レンダリングできるようにします。

Litテンプレートは非常に表現力豊かで、さまざまな方法で動的コンテンツをレンダリングできます。

• 式: テンプレートには、属性、テキスト、プロパティ、イベントハンドラー、さらには他のテンプレートのレンダリングに使用できる*式*と呼ばれる動的値を含めることができます。
• 条件: 式は、標準のJavaScriptフロー制御を使用して条件付きコンテンツをレンダリングできます。
• リスト: 標準のJavaScriptループおよび配列技術を使用して、データをテンプレートの配列に変換することにより、リストをレンダリングします。
• 組み込みディレクティブ: ディレクティブは、Litのテンプレート機能を拡張できる関数です。ライブラリには、さまざまなレンダリングニーズに対応する組み込みディレクティブのセットが含まれています。
• カスタムディレクティブ: 必要に応じて、独自のディレクティブを作成してLitのレンダリングをカスタマイズすることもできます。

Litコンポーネントの外部で、スタンドアロンテンプレート用にLitのテンプレートライブラリを使用することもできます。詳細は、スタンドアロンlit-htmlテンプレートを参照してください。

このページを編集