templateタグについて

結構昔からあったようなのですが知らなかったので、、
templateタグというものがありまして、素敵だったのでご紹介

templateタグ

ページがロードされるときはレンダリングされず、javascriptでアクティベートする必要があるタグ。
テキストではなく、HTML要素として存在しています。
document.importNode() を使って.content のクローンを作ることで、アクティベートできます。(importNodeはデフォルトはシャロークローン)
.content プロパティはテンプレートの中身を持つ読み込み専用の DocumentFragment のため、ブラウザでこのプロパティが使えないと利用できません。

templateタグ

<template id="mytemplate">
 <img src="" alt="great image">
 <div class="comment"></div>
</template>

アクティベートの仕方

var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo.png';

var clone = document.importNode(t.content, true);
document.body.appendChild(clone);

コンテンツがクローンされると画像リクエストが送られ、レンダリングされて画像が表示されるようになります。
とにかくどこに配置しておいてもアクティベートされない限り何もしないし見えない子というのがうれしいです。

ブラウザ対応はこんな感じなので使うところは限られそうですね → polyfillありました！

利用できるかの判定の仕方はこちら

if ('content' in document.createElement('template')) { ... } //template要素のcontent属性があれば利用できる

古いブラウザではtemplateタグがそのまま表示されてしまうこともあるので、templateタグに対してdisplay:noneなどattributeを書いておくのが良さそうです。

テンプレートの利用例はこちらが参考になりました。
こちらも見つけたので、web componentの理解として後でじっくり読んでみます。

参考： https://www.html5rocks.com/en/tutorials/webcomponents/template/