0Pricing
JavaScript Academy · Lesson

Templates and Slots

Compose components with template and slot.

The template Element

The <template> element holds inert HTML that is parsed but not rendered. Its content stays out of the page until you clone and insert it, making it perfect for reusable markup.

Accessing Template Content

A template's children live in its .content property, a DocumentFragment. Scripts, images, and styles inside it are not executed or loaded until inserted.

// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragment

All lessons in this course

  1. Defining Custom Elements
  2. Lifecycle Callbacks
  3. Shadow DOM and Encapsulation
  4. Templates and Slots
← Back to JavaScript Academy