1. 개요
html node를 담는 태그이며, template 태그 하위에 위치한 노드들은 웹 페이지가 로드될 때 렌더링되지 않는다.
복제할 대상을 담아놓기 위한 태그라고 생각하면 된다.
template 태그 및 하위 노드는 DOM에는 포함되어있지만, render tree에는 포함되지 않는다.
따라서 렌더링 될 때 요소들이 보이지 않게 된다.
2. 사용
template 태그는 importNode, 혹은 cloneNode API와 함께 사용한다.
importNode를 적용한 예시는 아래와 같다.
<body>
<template id="template">
<div>
<h1>Template header</h1>
<p>This is template contents</p>
</div>
</template>
<div id="paste-area"></div>
<script>
const pasteArea = document.getElementById("paste-area");
const targetNode = document.importNode(document.getElementById("template").content, true);
pasteArea.appendChild(targetNode);
</script>
</body>3. 주의사항
template 태그 자체는 getElementById 및 querySelector 등을 이용하여 쿼리할 수 있지만, 하위에 있는 요소들은 쿼리할 수 없다.
하위 요소들은 render tree에 포함되어있지 않아 쿼리할 대상을 찾지 못하기 때문이다.
<body>
<template id="template">
<h1 id="header">template header</h1>
</template>
<script>
const template = document.getElementById("template");
console.log(template); // <template>(...)</template>
const header = document.getElementById("header");
console.log(header); // null
</script>
</body>이런 경우에는 template 태그를 쿼리한 뒤, template 태그의 content 속성을 이용하여 쿼리하고자 하는 요소를 찾아야 한다.
<body>
<template id="template">
<h1 id="header">template header</h1>
</template>
<script>
const template = document.getElementById("template");
const header = template.content.getElementById("header");
console.log(header); // <h1 id="header">template header</h1>
</script>
</body>