<template>
The template element holds inert HTML fragments that are not rendered until cloned by script.
Syntax
<template>...</template>Examples
<template id="row">
<li class="item"><span class="name"></span></li>
</template>
<script>
const tpl = document.getElementById('row');
const node = tpl.content.cloneNode(true);
document.querySelector('ul').append(node);
</script>
Output
Nothing renders for the template itself; the cloned <li> is appended to the list at runtime.
Notes
Content lives in the .content DocumentFragment; scripts inside do not run and images do not load until inserted. Also used to declare shadow DOM with the shadowrootmode attribute.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 26 |
| firefox | 22 |
| safari | 8.0 |
| edge | 13 |