The

In modern web development, building reusable and modular components is a big part of creating maintainable user interfaces. HTML5 gives us two powerful tools for this: the <template></template> and <slot></slot> elements. They might not be as flashy as some JavaScript frameworks, but they're lightweight, native, and work right out of the box.

What <template></template> does (and why it's useful)

The <template></template> element lets you define chunks of HTML that aren't rendered immediately when the page loads. Think of it like a blueprint — it holds markup that you can clone and insert into the DOM later using JavaScript.

This is super handy if you want to reuse the same structure multiple times without duplicating code. For example, say you're building a list of cards that all look the same but have different content. You could write one template and stamp it out as many times as needed.

Here's a quick idea of how it works:

 <template id="card-template">
  <div class="card">
    <h2>Title</h2>
    <p>Content goes here.</p>
  </div>
</template>

Then in JavaScript:

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

No rendering until you actually append it — simple and efficient.

How <slot> fits into the picture

Now, what if you want to make your templates more dynamic? That's where <slot> comes in. It acts like a placeholder inside a template or a custom element. You can pass in different content each time you use the template by putting it between the custom element tags.

Slots are especially useful with Web Components, but even outside of them, they help build flexible UI pieces. Here's a basic example:

 <template id="panel-template">
  <div class="panel">
    <slot name="header">Default Header</slot>
    <div class="content">
      <slot>Default Content</slot>
    </div>
  </div>
</template>

When you use this somewhere else:

 <my-panel>
  <h1 slot="header">Custom Title</h1>
  <p>This will replace the default content.</p>
</my-panel>

You get a panel with your own header and content — without rewriting the whole thing every time.

When to combine <template></template> and <slot></slot>

Using these two together makes sense when you're building reusable UI blocks that need both structure and flexibility. Templates give you the base layout, and slots let you inject variation where needed.

A common use case is creating custom elements. For instance, a reusable modal dialog component might have a template defining its overall layout, with slots for the title, body content, and actions.

Another example: tabs. Each tab panel could be based on a shared template, but the actual tab label and content would come from slots, making each tab unique while keeping the behavior consistent.

Some tips when working with them:

• Always test fallback content inside <slot></slot> in case nothing gets passed in.
• Avoid deeply nested slots unless necessary — it can get confusing fast.
• Use named slots for clarity when there are multiple insertion points.
• Keep templates small and focused — don't overstuff them with too much logic.

A few gotchas to watch for

One thing that trips people up is forgetting that the content inside <template></template> isn't active. Scripts won't run, images won't load, and styles won't apply until you actually put it into the DOM. So if you're planning to include any interactive bits, make sure you wire those up after cloning.

Also, slots inside shadow DOM (used in Web Components) behave differently than in regular templates. If you're mixing shadow DOM with <slot></slot> , things like styling and event propagation might need extra attention.

And remember, just because something can be done with templates and slots doesn't always mean it should . Sometimes plain old HTML and a little JavaScript is better than over-engineering.

Basically that's it.

The above is the detailed content of Using the HTML5 `` and `` elements. For more information, please follow other related articles on the PHP Chinese website!