template要素を初体験

reactの普及で使用頻度が減ったような気がするShadow DOMだが、tempalte要素をいままで使ったことがなかったので、初めて使ってみた。

template要素はレンダリングされないため、ブラウザに表示するにはjsを使用する必要がある。

<template id="template">
  <p>hoge</p>
</template>

<div id="root"></div>
<script>
const $tpl = document.querySelector('#template');
const $clone = $tpl.content.cloneNode(true);
// データを加工する場合
$clone.querySelector('p').textContent = 'foo';
document.querySelector('#root').appendChild($clone);
</script>