HTML テンプレートの使用
標準の HTML と、Lightning Web Components に固有のいくつかのディレクティブを使用してテンプレートを作成します。
コンポーネントが表示を行うとき、<template> タグは、コンポーネント名 <namespace-component-name> に置き換えられます。
たとえば、ブラウザコンソールで、テンプレート myComponent.html を使用するコンポーネントは、<c-my-component> としてレンダリングされます。ここで c は、デフォルトの名前空間です。
HTML テンプレートでは、DOM へのデータも表示されます。シンプルな構文を使用して、コンポーネントのテンプレートをコンポーネントの JavaScript クラスのデータに宣言的にバインドします。
テンプレートには、ネストされた <template> タグとディレクティブを含めることができます。
ディレクティブとは、マークアップで DOM をより詳細に操作できる lwc:if や for:each などの特別な HTML 属性のことです。
ネストされた <template> タグには、for:each、iterator:iteratorName、lwc:if、lwc:else、lwc:elseif、if:true|false のいずれかのディレクティブを含める必要があります。
他のディレクティブや HTML 属性では、ネストされた <template> タグを使用できません。無効なテンプレートの使用は無視されます。つまり、無効なテンプレートとその子は DOM で表示されず、コンポーネントを読み込むときに警告が返されます。
たとえば、ネストされた <template> タグで class 属性を使用するのではなく、<div> または <span> タグで class 属性を使用します。
VS Code を使用する場合は、Salesforce Extensions Pack をインストールすることをお勧めします。この拡張機能を使用すると、入力中に不正なコードや不適切なコードにフラグが付けられるため、テンプレートディレクティブを操作するときに役立ちます。
ルートまたはネストされた <template> タグでサポートされるディレクティブについての詳細は、「HTML テンプレートディレクティブ」を参照してください。
関連トピック