<template>タグの解説
<template>は、スクリプトによって文書に挿入できるHTMLの断片を定義します。ページの読み込み時には描画されないコンテンツの断片を定義し、後にJavaScriptを通じてアクティベート可能な状態でマークアップすることができます。
使用用途としては、重複する内容の一部をテンプレートとして保持したり、ユーザーの操作でDOMの内容が変化するようなコンテンツに向いています。
<template>タグの特徴
- この要素に囲まれた部分は、ページ読み込み時に自律動作しません。つまり、この範囲内にマークアップされたは箇所は、隠れたDOMとして保存され、呼び出されるまで表示されません。
- テンプレート内のコンテンツは、アクティベートされるまでドキュメント内に存在しないものとして扱われます。よって、画像や動画、音声はロードされませんし、スクリプトは実行されません。
<template>は<head>、<body>の中であれば、どこにでも置くことができます（コンテンツモデルの子要素以外）。そして、その中に置けるコンテンツであれば、何を置いても構いません。- テンプレートを使うには、JavaScriptでアクティベート（有効化）する必要があります。
<template>要素に指定できる属性
shadowrootmode- 親要素のシャドウルートを生成します。
Element.attachShadow()メソッドを宣言するもので、enumerated値を受け入れます。open：内部シャドウルートDOMをJavaScriptに公開します。closed：内部シャドウルートDOMをJavaScriptから隠します。
shadowrootclonable- この要素を使って作成したシャドウルートの
clonableプロパティの値をtrueに設定します。この場合、Node.cloneNode()またはDocument.importNode()でシャドウホスト（<template>の親要素）の複製を作成すると、コピーにシャドウルートが含まれます。 shadowrootdelegatesfocus- この要素を使って作成したシャドウルートの
delegatesFocusプロパティの値をtrueに設定します。この場合、シャドウツリー内のフォーカスできない要素が選択された場合、フォーカスはツリー内の最初のフォーカス可能な要素に移ります。既定値はfalseです。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<template>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。既定では画面に表示されず、存在しない要素として扱われます。内部にJavascriptで扱われる内容を書き込みます。
<template id="template">
// 任意の内容
</template>
このタグを使ったマークアップのサンプルです。
<template id="myTemplate">
<img src="" alt="image">
<div class="comment"></div>
</template>
<script>
const t = document.querySelector('#myTemplate');
t.content.querySelector('img').src = 'file.png';
const clone = document.importNode(t.content, true);
document.body.appendChild(clone);
</script>