HTML Living Standard/template

template 要素

<template> 要素は、HTML 文書内にスクリプトやクライアント側のテンプレートを記述するために使用されます。この要素に含まれるコンテンツは、レンダリングされず、他の部分に挿入または複製されるまで非表示のままとなります。

概要

<template> 要素は、DOM のテンプレート機能を提供するための仕組みです。この要素は HTML 文書において非表示のコンテナーとして動作し、再利用可能な構造を定義するのに適しています。

利点

• 再利用可能性: テンプレート内のコンテンツを複製して、複数の場所に挿入できます。
• 非表示: ページの読み込み時にはテンプレート内のコンテンツは描画されません。
• 分離された DOM: テンプレートの内容は、ドキュメントツリーから分離されています。

使用例

以下は、<template> 要素を使用した例です。

<template id="my-template">
  <div class="item">
    <h2>テンプレートのタイトル</h2>
    <p>テンプレートの内容です。</p>
  </div>
</template>

<script>
  const template = document.getElementById('my-template');
  const clone = template.content.cloneNode(true);
  document.body.appendChild(clone);
</script>

この例では、<template> 内の内容を複製し、ドキュメントのボディに追加しています。

属性

<template> 要素には、グローバル属性が使用可能です。それ以外の特定の属性は定義されていません。

DOM インターフェース

<template> 要素は次の DOM インターフェースを提供します。

プロパティ

• content

  DocumentFragment オブジェクトを返します。テンプレート内の内容を表し、ドキュメントツリーに接続されていません。

使用例

const template = document.querySelector('template');
console.log(template.content); // DocumentFragment を出力

動作

1. テンプレートのコンテンツは非表示

   <template> 要素内のコンテンツは、ドキュメントのロード時に描画されません。

2. クローン可能な DOM

   template.content.cloneNode(true) を使用することで、テンプレートの内容を複製し、他の要素に挿入できます。

制限事項

• <template> 要素自体は表示されませんが、JavaScript を用いて操作できます。
• ネストされたテンプレートを使用することも可能ですが、適切に管理しないと複雑になる可能性があります。

互換性

<template> 要素はすべての最新ブラウザーでサポートされています。ただし、古いブラウザーではサポートされていない場合があるため、ポリフィルの使用を検討してください。

関連項目

• HTML Living Standard/slot

関連仕様

• HTML Living Standard - template
• MDN Web Docs - template