Struct Template 

pub struct Template;

The <template> element - holds HTML content that is not rendered immediately.

Purpose

The <template> element is used to declare fragments of HTML that can be cloned and inserted into the document via JavaScript. Its content is not rendered when the page loads, making it ideal for client-side templating. The content is parsed but inert until activated.

Content Categories

• Metadata Content
• Flow Content
• Phrasing Content
• Script-supporting Element

Permitted Content Model

• Anything (content is inert and stored in a DocumentFragment)

Common Use Cases

• Client-side HTML templates
• Repeating UI patterns (list items, cards, etc.)
• Dynamic content generation
• Web components and custom elements
• Avoiding script-based string concatenation

Key Attributes

• Global attributes only

Example

<!-- Template for list items -->
<template id="item-template">
  <li class="item">
    <h3 class="item-title"></h3>
    <p class="item-description"></p>
  </li>
</template>

<ul id="item-list"></ul>

<script>
  const template = document.getElementById('item-template');
  const list = document.getElementById('item-list');
   
  const clone = template.content.cloneNode(true);
  clone.querySelector('.item-title').textContent = 'Title';
  clone.querySelector('.item-description').textContent = 'Description';
  list.appendChild(clone);
</script>

<!-- Card template -->
<template id="card-template">
  <div class="card">
    <img class="card-image" src="" alt="">
    <div class="card-body">
      <h4 class="card-title"></h4>
      <p class="card-text"></p>
      <a class="card-link" href="#">Learn more</a>
    </div>
  </div>
</template>

<!-- Table row template -->
<template id="row-template">
  <tr>
    <td class="col-name"></td>
    <td class="col-email"></td>
    <td class="col-role"></td>
  </tr>
</template>

WHATWG Specification

• 4.12.3 The template element

Trait Implementations

impl HtmlElement for Template

const TAG: &'static str = "template"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl<T: FlowContent> CanContain<T> for Template

impl CanContain<Template> for Colgroup

impl CanContain<Template> for Dl

impl CanContain<Template> for Head

impl CanContain<Template> for Hgroup

impl CanContain<Template> for Menu

impl CanContain<Template> for Ol

impl CanContain<Template> for Optgroup

impl CanContain<Template> for Picture

impl CanContain<Template> for Select

impl CanContain<Template> for Table

impl CanContain<Template> for Tbody

impl CanContain<Template> for Tfoot

impl CanContain<Template> for Thead

impl CanContain<Template> for Tr

impl CanContain<Template> for Ul

impl FlowContent for Template

impl MetadataContent for Template

impl PhrasingContent for Template

impl ScriptSupporting for Template