template要素 - ページの読み込み時にすぐには描画されないものの、後でスクリプトを使用してインスタンスを生成できるHTMLを保持するメカニズムの template要素に関してのメモ書きです。 - (The template element.)

1.仕様

TEMPLATE要素は、
ページの読み込み時に
すぐには描画されないものの、
後で JavaScriptを使用して
インスタンスを生成できる
HTMLを保持する
メカニズムの要素です。

TEMPLATE - - EMPTY -- declare fragments of HTML. (The template element.) [Metadata|Flow|Phrasing|Script] --

template

HTMLの断片を宣言 (declare fragments of HTML)

種類

雛型要素

テンプレートコンテンツを持つことができる要素です。

カテゴリ

使用できるコンテキスト

メタデータコンテンツを受け入れる要素
フレージングコンテンツを受け入れる要素
スクリプトをサポートする要素を受け入れる要素
<colgroup>要素に 0個以上

メタデータコンテンツを受け入れる要素のコンテンツとして、使用できます。
フレージングコンテンツを受け入れる要素のコンテンツとして、使用できます。
スクリプトをサポートする要素を受け入れる要素のコンテンツとして、使用できます。
<colgroup>要素に 0個以上をそのコンテンツとして、使用できます。

メタデータコンテンツを受け入れる要素は、<head>要素です。

フレージングコンテンツを受け入れる要素は、<h1>要素, <h2>要素, <h3>要素, <h4>要素, <h5>要素, <h6>要素, <p>要素, <pre>要素, <output>要素, <progress>要素, <meter>要素, <label>要素, <datalist>要素, <body>要素, <section>要素, <nav>要素, <aside>要素, <article>要素, <header>要素, <footer>要素, <main>要素, <address>要素, <li>要素, <dt>要素, <dd>要素, <caption>要素, <th>要素, <td>要素, <form>要素, <fieldset>要素, <search>要素, <blockquote>要素, <figure>要素, <figcaption>要素, <div>要素, <dialog>要素, <abbr>要素, <b>要素, <bdi>要素, <bdo>要素, <cite>要素, <code>要素, <data>要素, <dfn>要素, <em>要素, <i>要素, <kbd>要素, <mark>要素, <q>要素, <s>要素, <samp>要素, <small>要素, <span>要素, <strong>要素, <sub>要素, <sup>要素, <u>要素, <var>要素です。

スクリプトをサポートする要素を受け入れる要素は、<hgroup>要素, <ol>要素, <ul>要素, <menu>要素, <dl>要素, <div>要素, <picture>要素, <table>要素, <tbody>要素, <thead>要素, <tfoot>要素, <tr>要素, <select>要素, <datalist>要素, <optgroup>要素です。

ただし、colgroup要素は span属性を持たない場合に限ります。

コンテンツモデル

何もない

要素のコンテンツモデルが「何もない」の場合、要素にはテキストノード (要素間の空白以外) と要素ノードが含まれていてはなりません。

template要素のテンプレートの内容は、要素自体の子ではありません。

template要素のコンテンツの位置への記述は、要素自体の子ではないのでコンテンツモデルの制限は受けません。

DOM操作の結果として、template要素にテキストノードと要素ノードを含むことも可能です。ただし、そのコンテンツモデルは「何もない」なので、いずれかを持つことはtemplate要素のコンテンツモデルに違反します。

タグの省略

どちらのタグも省略できません。

コンテンツ属性

グローバル属性他

shadowrootmode属性: 宣言型シャドウルートのストリーミングを有効にする
shadowrootdelegatesfocus属性: デリゲートのフォーカスを宣言型シャドウルートに設定します
shadowrootclonable属性: 宣言型シャドウルートにクローン可能を設定します
shadowrootserializable属性: 宣言型シャドウルートでシリアル化可能なセット

DOM インターフェイス

HTMLTemplateElement

[Exposed=Window]
interface HTMLTemplateElement : HTMLElement {
[HTMLConstructor] constructor();
readonly attribute DocumentFragment content;
[CEReactions] attribute DOMString shadowRootMode;
[CEReactions] attribute boolean shadowRootDelegatesFocus;
[CEReactions] attribute boolean shadowRootClonable;
[CEReactions] attribute boolean shadowRootSerializable;
};

HTMLElement

[Exposed=Window]
interface HTMLElement : Element {
[HTMLConstructor] constructor();
// metadata attributes
[CEReactions] attribute DOMString title;
[CEReactions] attribute DOMString lang;
[CEReactions] attribute boolean translate;
[CEReactions] attribute DOMString dir;
// user interaction
[CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
[CEReactions] attribute DOMString inert;
undefined click();
[CEReactions] attribute DOMString accessKey;
readonly attribute DOMString accessKeyLabel;
[CEReactions] attribute boolean draggable;
[CEReactions] attribute boolean spellcheck;
[CEReactions] attribute DOMString writingSuggestions;
[CEReactions] attribute DOMString autocapitalize;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
ElementInternals attachInternals();
// The popover API
undefined showPopover();
undefined hidePopover();
boolean togglePopover(optional boolean force);
[CEReactions] attribute DOMString? popover;
};
HTMLElement includes GlobalEventHandlers;
HTMLElement includes ElementContentEditable;
HTMLElement includes HTMLOrSVGElement;

Element

[Exposed=Window]
interface Element : Node {
readonly attribute DOMString? namespaceURI;
readonly attribute DOMString? prefix;
readonly attribute DOMString localName;
readonly attribute DOMString tagName;
[CEReactions] attribute DOMString id;
[CEReactions] attribute DOMString className;
[SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
[CEReactions, Unscopable] attribute DOMString slot;
boolean hasAttributes();
[SameObject] readonly attribute NamedNodeMap attributes;
sequence<DOMString> getAttributeNames();
DOMString? getAttribute(DOMString qualifiedName);
DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
[CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
[CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
[CEReactions] undefined removeAttribute(DOMString qualifiedName);
[CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
[CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
boolean hasAttribute(DOMString qualifiedName);
boolean hasAttributeNS(DOMString? namespace, DOMString localName);
Attr? getAttributeNode(DOMString qualifiedName);
Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
[CEReactions] Attr? setAttributeNode(Attr attr);
[CEReactions] Attr? setAttributeNodeNS(Attr attr);
[CEReactions] Attr removeAttributeNode(Attr attr);
ShadowRoot attachShadow(ShadowRootInit init);
readonly attribute ShadowRoot? shadowRoot;
Element? closest(DOMString selectors);
boolean matches(DOMString selectors);
boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
HTMLCollection getElementsByTagName(DOMString qualifiedName);
HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
HTMLCollection getElementsByClassName(DOMString classNames);
[CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
undefined insertAdjacentText(DOMString where, DOMString data); // legacy
};

GlobalEventHandlers

interface mixin GlobalEventHandlers {
attribute EventHandler onabort;
attribute EventHandler onauxclick;
attribute EventHandler onbeforeinput;
attribute EventHandler onbeforematch;
attribute EventHandler onbeforetoggle;
attribute EventHandler onblur;
attribute EventHandler oncancel;
attribute EventHandler oncanplay;
attribute EventHandler oncanplaythrough;
attribute EventHandler onchange;
attribute EventHandler onclick;
attribute EventHandler onclose;
attribute EventHandler oncontextlost;
attribute EventHandler oncontextmenu;
attribute EventHandler oncontextrestored;
attribute EventHandler oncopy;
attribute EventHandler oncuechange;
attribute EventHandler oncut;
attribute EventHandler ondblclick;
attribute EventHandler ondrag;
attribute EventHandler ondragend;
attribute EventHandler ondragenter;
attribute EventHandler ondragleave;
attribute EventHandler ondragover;
attribute EventHandler ondragstart;
attribute EventHandler ondrop;
attribute EventHandler ondurationchange;
attribute EventHandler onemptied;
attribute EventHandler onended;
attribute OnErrorEventHandler onerror;
attribute EventHandler onfocus;
attribute EventHandler onformdata;
attribute EventHandler oninput;
attribute EventHandler oninvalid;
attribute EventHandler onkeydown;
attribute EventHandler onkeypress;
attribute EventHandler onkeyup;
attribute EventHandler onload;
attribute EventHandler onloadeddata;
attribute EventHandler onloadedmetadata;
attribute EventHandler onloadstart;
attribute EventHandler onmousedown;
[LegacyLenientThis] attribute EventHandler onmouseenter;
[LegacyLenientThis] attribute EventHandler onmouseleave;
attribute EventHandler onmousemove;
attribute EventHandler onmouseout;
attribute EventHandler onmouseover;
attribute EventHandler onmouseup;
attribute EventHandler onpaste;
attribute EventHandler onpause;
attribute EventHandler onplay;
attribute EventHandler onplaying;
attribute EventHandler onprogress;
attribute EventHandler onratechange;
attribute EventHandler onreset;
attribute EventHandler onresize;
attribute EventHandler onscroll;
attribute EventHandler onscrollend;
attribute EventHandler onsecuritypolicyviolation;
attribute EventHandler onseeked;
attribute EventHandler onseeking;
attribute EventHandler onselect;
attribute EventHandler onslotchange;
attribute EventHandler onstalled;
attribute EventHandler onsubmit;
attribute EventHandler onsuspend;
attribute EventHandler ontimeupdate;
attribute EventHandler ontoggle;
attribute EventHandler onvolumechange;
attribute EventHandler onwaiting;
attribute EventHandler onwebkitanimationend;
attribute EventHandler onwebkitanimationiteration;
attribute EventHandler onwebkitanimationstart;
attribute EventHandler onwebkittransitionend;
attribute EventHandler onwheel;
};

ElementContentEditable

interface mixin ElementContentEditable {
[CEReactions] attribute DOMString contentEditable;
[CEReactions] attribute DOMString enterKeyHint;
readonly attribute boolean isContentEditable;
[CEReactions] attribute DOMString inputMode;
};

HTMLOrSVGElement

interface mixin HTMLOrSVGElement {
[SameObject] readonly attribute DOMStringMap dataset;
attribute DOMString nonce; // intentionally no [CEReactions]
[CEReactions] attribute boolean autofocus;
[CEReactions] attribute long tabIndex;
undefined focus(optional FocusOptions options = {});
undefined blur();
};

ARIA in HTML

暗黙的="No" ARIAロール="No" aria-* 属性="No"

暗黙的な ARIAセマンティクスがありませんが、意味はあり、この意味は、ARIA によって提供されず、ARIA のユーザーに公開されていないロール、状態、プロパティで表現される可能性があります。

作成者は、暗黙的な ARIAセマンティクス, または HTML要素のネイティブセマンティクスを上書きしてはいけません。

記述できる aria-* 属性はありません。

レンダリング

ボックスを生成しない

非表示の要素

template {
display: none;
}

CSS を大雑把に読むと、要素とその子孫はボックスやテキストシーケンスを生成しません。などになります。

説明

template要素は、スクリプトによって文書に複製および挿入できる HTMLのフラグメントを宣言する為に使用されます。

template要素は、ページの読み込み時にすぐには描画されないものの、後で JavaScriptを使用してインスタンスを生成できる HTMLを保持するメカニズムの要素です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>template要素の例 - (Example of template element) | 離珠のHTMLでしぃ！</title>
<template id="itpJs001">
<p>てんぷれーとのさんぷる</p>
</template>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.body.appendChild(document.getElementById("itpJs001").content.cloneNode(true));
});
</script>
<link rel="icon" href="../favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>
<h1>template要素の例</h1>
<p>この例の template要素は、「てんぷれーとのさんぷる」というテキストの段落を用意しています。</p>
</body>
</html>

このサンプルへのリンクです。
(./extemplate.htm)

参照元

HTML Living Standard. 4.12.3 The template element (Last Updated 27 August 2024)
HTML Living Standard. 15 Rendering 15.3.1 Hidden elements (Last Updated 27 August 2024)
HTML 5.2 W3C 勧告. 4.12.3 The template element (W3C勧告、2017年12月14日)
HTML 5.2 W3C 勧告. 10.3.1. Hidden elements (W3C勧告、2017年12月14日)
HTML 5.1 W3C 勧告. 4.12.3 The template element (W3C勧告、2016年11月1日)
HTML 5.1 W3C 勧告. 10.3.1. Hidden elements (W3C勧告、2016年11月1日)
HTML 5 W3C 勧告. 4.12.3 The template element (W3C勧告、2014年10月28日)
HTML 5 W3C 勧告. 10.3.1. Hidden elements (W3C勧告、2014年10月28日)
<template>: コンテンツテンプレート要素 - HTML: ハイパーテキストマークアップ言語 | MDN

JSONデータ

JSON形式での、データのイメージです。

{
"template": {
"check": "2024-09-01",
"group": "Scripting",
"element": "- - EMPTY -- declare fragments of HTML. (The template element.) [Metadata|Flow|Phrasing|Script] --",
"attlist": {
"%Global;": "",
"shadowrootmode": "CDATA #IMPLIED -- Enables streaming declarative shadow roots -- ",
"shadowrootdelegatesfocus": "(shadowrootdelegatesfocus) #IMPLIED -- Sets delegates focus on a declarative shadow root -- ",
"shadowrootclonable": "(shadowrootclonable) #IMPLIED -- Sets clonable on a declarative shadow root -- ",
"shadowrootserializable": "(shadowrootserializable) #IMPLIED -- Sets serializable on a declarative shadow root -- ",
},
"comment": "HTMLの断片を宣言 (declare fragments of HTML)",
"point": "スクリプトによって文書に複製および挿入できる HTMLのフラグメントを宣言する為に使用されます。",
"description": "ページの読み込み時にすぐには描画されないものの、後で JavaScriptを使用してインスタンスを生成できる HTMLを保持するメカニズムの要素です。",
"kind": "Template",
"categories": [
"Metadata",
"Flow",
"Phrasing",
"Scriptsupporting",
],
"used": [
"parent (%Metadata)*",
"parent (%Phrasing)*",
"parent (%Scriptsupporting)*",
"COLGROUP (TEMPLATE)*",
],
"usedsupplement": "ただし、colgroup要素は span属性を持たない場合に限ります。",
"contentmodel": "%Nothing",
"contentmodelsupplement": [
"template要素のテンプレートの内容は、要素自体の子ではありません。",
"template要素のコンテンツの位置への記述は、要素自体の子ではないのでコンテンツモデルの制限は受けません。",
"DOM操作の結果として、template要素にテキストノードと要素ノードを含むことも可能です。ただし、そのコンテンツモデルは「何もない」なので、いずれかを持つことはtemplate要素のコンテンツモデルに違反します。",
],
"tag": [
"-",
"-",
],
"attributes": {
"shadowrootmode": "宣言型シャドウルートのストリーミングを有効にする",
"shadowrootdelegatesfocus": "デリゲートのフォーカスを宣言型シャドウルートに設定します",
"shadowrootclonable": "宣言型シャドウルートにクローン可能を設定します",
"shadowrootserializable": "宣言型シャドウルートでシリアル化可能なセット",
},
"dominterface": "HTMLTemplateElement",
"rendering": "Hidden",
"reference": [
{
"title": "HTML Living Standard. 4.12.3 The template element.",
"href": "https://html.spec.whatwg.org/multipage/scripting.html#the-template-element",
"heading": "HTML Living Standard. 4.12.3 The template element",
"sub": "Last Updated 27 August 2024",
},
{
"title": "HTML Living Standard. 15 Rendering 15.3.1 Hidden elements.",
"href": "https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements",
"heading": "HTML Living Standard. 15 Rendering 15.3.1 Hidden elements",
"sub": "Last Updated 27 August 2024",
},
{
"title": "HTML 5.2 W3C Recommendation. 4.12.3 The template element. W3C Recommendation, 14 December 2017.",
"href": "https://www.w3.org/TR/2017/REC-html52-20171214/semantics-scripting.html#the-template-element",
"heading": "HTML 5.2 W3C 勧告. 4.12.3 The template element",
"sub": "W3C勧告、2017年12月14日",
},
{
"title": "HTML 5.2 W3C Recommendation. 10.3.1. Hidden elements.",
"href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#hidden-elements",
"heading": "HTML 5.2 W3C 勧告. 10.3.1. Hidden elements",
"sub": "W3C勧告、2017年12月14日",
},
{
"title": "HTML 5.1 W3C Recommendation. 4.12.3 The template element. W3C Recommendation, 1 November 2016.",
"href": "https://www.w3.org/TR/2016/REC-html51-20161101/semantics-scripting.html#the-template-element",
"heading": "HTML 5.1 W3C 勧告. 4.12.3 The template element",
"sub": "W3C勧告、2016年11月1日",
},
{
"title": "HTML 5.1 W3C Recommendation. 10.3.1. Hidden elements. W3C Recommendation, 1 November 2016.",
"href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#hidden-elements",
"heading": "HTML 5.1 W3C 勧告. 10.3.1. Hidden elements",
"sub": "W3C勧告、2016年11月1日",
},
{
"title": "HTML 5 W3C Recommendation. 4.12.3 The template element. W3C Recommendation, 28 October 2014.",
"href": "https://www.w3.org/TR/2014/REC-html5-20141028/scripting-1.html#the-template-element",
"heading": "HTML 5 W3C 勧告. 4.12.3 The template element",
"sub": "W3C勧告、2014年10月28日",
},
{
"title": "HTML 5 W3C Recommendation. 10.3.1. Hidden elements. W3C Recommendation, 28 October 2014.",
"href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#hidden-elements",
"heading": "HTML 5 W3C 勧告. 10.3.1. Hidden elements",
"sub": "W3C勧告、2014年10月28日",
},
{
"title": "MDN Web Docs. HTML <template>: The Content Template element.",
"href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/template",
"heading": "<template>: コンテンツテンプレート要素 - HTML: ハイパーテキストマークアップ言語 | MDN",
},
],
"version": {
"first": "HTML5",
"latest": "HTML Living Standard",
},
}
}

注意: 簡易に描画する為に、各項目の後ろに , を付与しています。JSON の形式では、末尾の項目の後には , は付けません。

最終確認日

2024-09-01

2.使用できるコンテキスト

template要素は、
メタデータコンテンツ,
フレージングコンテンツ,
スクリプトをサポートする要素を
受け入れる要素と
span属性を持たない
colgroup要素に
配置できます。

<template>要素が使用できるコンテキスト(Context・文脈)は、メタデータコンテンツ, フレージングコンテンツ, スクリプトをサポートする要素を受け入れる要素と、span属性を持たない <colgroup>要素のコンテンツとしてです。

メタデータコンテンツをコンテンツの一部として配置できる要素は、以下の各要素です。

<head>要素

フレージングコンテンツをコンテンツの一部として配置できる要素は、以下の各要素です。

スクリプトをサポートする要素をコンテンツの一部として配置できる要素は、以下の各要素です。

document

html

head

body

template

table

hgroup

colgroup

template

<template>要素は、<head>要素に配置できます。

<template>要素は、フレージングコンテンツをコンテンツの一部として配置できる要素である<p>要素に配置できます。

<template>要素は、スクリプトをサポートする要素をコンテンツの一部として配置できる要素である<hgroup>要素に配置できます。

<template>要素は、span属性を持たない <colgroup>要素に配置できます。

3.コンテンツモデル

template要素は、
記述に
制限はありません。

<template>要素の子や子孫としてどのようなコンテンツ(Content・内容) が含まれなければならないかというと、「何もない」 (要素にはテキストノード(要素間の空白以外) と要素ノードが含まれていてはなりません。) です。

これで注意してほしいのは、これはコンテンツモデルであって、<template>要素は子を持たないという事です。そしてtemplate要素開始タグとtemplate要素終了タグの間に記述される物は、<template>要素のcontent IDL属性によって返されるDocumentFragmentの子や子孫です。

<template>要素は、JavaScript を使用してインスタンスを生成する為の雛型なので、生成先で適切である必要はありますが記述の時点では制限はありません。また、これを書いてて思ったのが、<template>要素に<template>要素の入れ子は、意味としても変だし、記述的にも終了タグの判断がどうなるか。

作成者のイメージとしては、<template>要素のコンテンツとして自由に要素が配置できる感じです。
ただ、内部処理としては、別の箇所に子要素を保持している様です。

尚、<template>要素のコンテンツモデルは Nothing(何もない) です。コンテンツモデルが「何もない」の場合、要素にはテキストノード (要素間の空白以外) と要素ノードが含まれていてはなりません。
つまり、子の位置に記述するのは制限もなく自由であるが、スクリプトなどで要素にテキストノード, 要素ノードを含めてはいけないという事です。

document

DocumentFragment

(省略)

template要素に
記述した要素

template

<template>要素のコンテンツモデルは Nothing(何もない) です。

DocumentFragment インターフェイスは、親ノードを持たない最小限の文書オブジェクト (文書フラグメント) を表します。

4.コンテンツ属性

template要素は、
グローバル属性と、
shadowrootmode,
shadowrootdelegatesfocus,
shadowrootclonable,
shadowrootserializable を
設定できます。

<template>要素に指定することができる属性は、グローバル属性とshadowrootmode属性, shadowrootdelegatesfocus属性, shadowrootclonable属性, shadowrootserializable属性を設定できます。

shadowrootmode属性

<template shadowrootmode="open" shadowrootdelegatesfocus>

shadowrootmode属性は、ストリーミング宣言型シャドウルートを有効にします。OPEN, closed があり、それぞれ「オープン宣言型シャドウルート」, 「閉じられた宣言型シャドウルート」を表します。
無効な値のデフォルトと欠落値のデフォルトは両方とも none 状態です。

shadowrootdelegatesfocus属性

<template shadowrootmode="open" shadowrootdelegatesfocus>

shadowrootdelegatesfocus属性は、デリゲートのフォーカスを宣言型シャドウルートに設定するブール属性です。

shadowrootclonable属性

<template shadowrootmode="open" shadowrootdelegatesfocus shadowrootclonable>

shadowrootclonable属性は、宣言型シャドウルートにクローン可能を設定するブール属性です。

shadowrootserializable属性

<template shadowrootmode="open" shadowrootdelegatesfocus shadowrootserializable>

shadowrootserializable属性は、宣言的シャドウルートにシリアライズ可能を設定するブール属性です。

5.DOM インターフェイス

template要素を、
直接表す
プロパティは
ありません。

<template>要素を JavaScript などで操作するには、documentのgetElementById()メソッドを用いる方法があります。id属性で指定して、<template>要素を取得します。この時に取得できる値の形式はHTMLTemplateElement インターフェイスです。

他には、documentのquerySelector()メソッドを用いて、条件に一致する文書内で最初の一件を取得するとか、documentのquerySelectorAll()メソッドを用いて、条件に一致する要素のリストを取得するとか、name属性があればdocumentのgetElementsByName()メソッドを用いるとか、状況, 目的によりいろいろあります。

template要素に記述した内容を取得するには、HTMLTemplateElement インターフェイスの content プロパティを用います。

template要素を用いなくても、スクリプトのdocument.createElement() メソッドや document.createTextNode() メソッドを用いて同等の事が出来ます。違いは、HTMLで情報を保持するかスクリプトで保持するかだと思います。

<template id="itpJs501">
<p>テンプレートのサンプル</p>
</template>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("idvJs502").appendChild(document.getElementById("itpJs501").content.cloneNode(true));
});
</script>
<hr>
<div id="idvJs502">
</div>

template要素から、雛型を取り出す例です。

<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("idvJs503").appendChild(document.createElement("p").appendChild(document.createTextNode("別の方法")));
});
</script>
<hr>
<div id="idvJs503">
</div>

template要素での処理と同等の事を、スクリプトだけで行う例です。

6.アクセシビリティ

template要素は、
暗黙的な
ARIAセマンティクスは
ありません。

<template>要素の暗黙的なARIAセマンティクスは、ありません。ただ、意味は持っており、この意味はARIAによって提供されていないロール, ステート, プロパティで表現され、アクセシビリティAPIを介して支援技術のユーザーに公開されるかもしれません。

作成者が要素に指定できる<template>要素のARIA の役割、状態、およびプロパティの許容範囲は、No role (役割なし) と記されており、作成者は暗黙的なARIAセマンティクスまたはHTML要素のネイティブセマンティクスを上書きしてはならないことを表していす。
また、No aria-* attributes (aria-* 属性はありません) とも記されています。(実際は、No role or aria-* attributesと纏めて記されています。)

つまり、<template>要素の役割はなく、作成者は、ARIA ロール値と aria-* 属性を<template>要素に指定出来ないという事です。

7.レンダリング

template {
display: none;
}

template要素のユーザーエージェントレベルのスタイルシートデフォルトでは、displayプロパティの値は none であり、この要素とその子孫はボックスやテキストシーケンスを生成しません。

雛型をコンテナする要素なので、ビジュアルメディアでボックスを生成する様な指定は行わないのが良いでしょう。

8.気を付ける点

コンテンツモデル

template要素のコンテンツモデルは、「何もありません」(Nothing) です。template要素のテンプレートの内容は、要素自体の子ではありません。

技術的に DOM操作によってtemplate要素にテキストノード, 要素ノードを含める事が出来ますが、それは上記の様にtemplate要素のコンテンツモデルから不適切です。

尚 HTML文書の template要素に記述した内容を取得するには、HTMLTemplateElement インターフェイスの content プロパティを用います。

9.付記

スクリプトを学んでから
script要素, template要素は
使いましょう。

正直、script要素を使う場面は、スクリプトの知識が先で、HTMLの知識はその後だと思います。それ位スクリプトの知識が必要です。その上でtemplate要素でどう雛型の記述をするかなので、結局スクリプトの知識が必要です。

次は、「noscript要素」です。
スクリプトが有効な場合は何も表さず、スクリプトが無効な場合はその子を表す noscript要素に関してのメモ書きです。
前のページの「script要素」はこちらです。
上位のページの「スクリプティング」はこちらです。