HTML <template> Element Demo

The <template> element is a mechanism for holding HTML content that is not rendered when the page loads. It serves as a reusable fragment that can be cloned and inserted into the DOM dynamically using JavaScript. The content inside a <template> is parsed (validated by the browser) but remains inert — images don't load, scripts don't execute, and styles don't apply until the content is activated and inserted into the document.

Unlike elements with display: none or the hidden attribute, content inside a <template> is completely inert:
• Images and iframes inside a template do not load until activated
• Scripts inside a template do not execute until inserted into the DOM
• CSS inside a template does not apply to the outer document
• The template content lives in a separate DocumentFragment accessible via .content
Hidden elements still consume resources; templates do not.

The standard approach uses template.content.cloneNode(true):

const template = document.getElementById('my-template');
const clone = template.content.cloneNode(true);
document.body.appendChild(clone);

The cloneNode(true) method performs a deep clone of the DocumentFragment. Alternatively, document.importNode(template.content, true) achieves the same result. Each clone is independent — modifying one does not affect others or the original template.

Yes. Templates can include <style> and <script> tags. However:
• Styles inside a template are scoped to the template's content and only apply after the content is inserted into the DOM
• Scripts inside a template do not execute until the cloned content is appended to the document — this is a key security and performance feature
This makes templates ideal for Web Components where you want encapsulated styles and deferred script execution.

Both methods create copies of nodes, but they serve different purposes:
• node.cloneNode(deep) — creates a copy of a node within the same document. Use true for deep cloning (all descendants)
• document.importNode(node, deep) — imports a node from another document (or the same one) into the current document, adapting it to the target document's context
For <template> usage within the same document, template.content.cloneNode(true) is the most common and recommended approach.

No. This is one of the key advantages of <template>. Resources referenced inside a template — including <img> sources, <iframe> URLs, <video> posters, and external stylesheets — are not fetched or loaded until the template content is cloned and inserted into the active DOM. This makes templates highly efficient for deferred content rendering and lazy-loading patterns.

Yes, you can nest <template> elements inside one another. However, the inner template is also inert until its parent template content is cloned and inserted into the DOM. This nesting pattern is sometimes used in complex Web Components or when building recursive UI structures. Keep in mind that each nested template must be separately cloned and activated.

Common use cases include:
• Dynamic list rendering — clone a template row for each data item
• Modal/popup content — store dialog markup without rendering it upfront
• Web Components — define component shadow DOM structure (with <slot>)
• Lazy-loaded sections — defer rendering until user interaction
• SPA view templates — hold page fragments for client-side routing
• Repeated card layouts — product cards, user profiles, notification toasts

The <template> element is a foundational building block of Web Components, alongside Custom Elements and the Shadow DOM. In a typical Web Component, a <template> holds the component's HTML structure and scoped styles. When the component is instantiated, the template content is cloned and attached to the component's shadow root via shadowRoot.appendChild(template.content.cloneNode(true)). This pattern provides encapsulation and reusability.

Yes. The <template> element has excellent browser support, covering all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It is supported as far back as:
• Chrome 26+
• Firefox 22+
• Safari 8+
• Edge 13+
• iOS Safari 8+
• Android Browser 4.4+
Internet Explorer does not support <template>, but IE usage is negligible today (<0.1% global traffic). No polyfill is needed for modern web development.