Semantic & Interactive

<template> & <slot>

Inert markup for cloning, and Web Components composition.

1Reusable Markup

<template> holds HTML that is parsed but not rendered — clone it with JavaScript when needed. <slot> is used inside Web Components for content distribution.

Example Code

<template id="card-template">
  <article class="card">
    <h3></h3>
    <p></p>
  </article>
</template>

<script>
  const tpl = document.getElementById('card-template');
  const clone = tpl.content.cloneNode(true);
  clone.querySelector('h3').textContent = 'Hello';
  document.body.append(clone);
</script>

Finished reading?

Mark this topic as complete to track progress.

<dialog> Modal

Next Topic

ARIA & Accessibility