複数のテンプレートの表示

複数のデザインを持つコンポーネントを表示することもできますが、1 つのファイル内に HTML を混在させたくはありません。たとえば、あるバージョンのコンポーネントはプレーンで、別のバージョンでは画像と追加のテキストが表示されるとします。この場合は、複数の HTML テンプレートをインポートし、条件に応じて各バージョンを表示するビジネスロジックを作成します。このパターンは、一部の JavaScript フレームワークで使用されるコード分割に似ています。

コンポーネントバンドル内に複数の HTML ファイルを作成します。これらのファイルをすべてインポートし、コンポーネントの状態に応じて適切なテンプレートが返されるようにするための条件を render() メソッドに追加します。render() メソッドから返される値は、HTML ファイルからインポートされたデフォルトのエクスポートであるテンプレート参照でなければなりません。

この例の場合、テンプレート参照は、templateOne と templateTwo です。

追加テンプレートから CSS を参照するには、CSS のファイル名が外部テンプレートのファイル名と一致している必要があります。たとえば、templateTwo.html は、templateTwo.css からのみ CSS を参照できます。miscMultipleTemplates.css や templateOne.css から CSS を参照することはできません。

miscMultipleTemplates.html という同じ名前のテンプレートが含まれている場合、デフォルトの render() メソッドは、前の例で説明した上書きが含まれていない限り、そのテンプレートを返します。

関連トピック

• 条件に応じた DOM 要素の表示
• ライフサイクルフック