Overview

The <template> element is a powerful tool for creating reusable chunks of HTML. The content inside a template is parsed by the browser but not rendered, and any scripts or resources inside are not executed or downloaded until the template is instantiated.

Key Elements

  • <template>: Holds the HTML structure to be reused.
  • <slot>: A placeholder inside a web component that you can fill with your own markup.

Usage

Templates are typically cloned using JavaScript (document.importNode or template.content.cloneNode) and then appended to the DOM.

Related Terms