Tutorials References Exercises Bootcamps Videos Menu
Sign Up Create Website Get Certified Upgrade

HTML <slot> Tag


The template element holds HTML code without displaying it:

    <slot name="username"></slot>
    <slot name="birthday"></slot>
Try it Yourself »

Definition and Usage

The <slot> tag is a placeholder .....

Content inside a <template> tag will not be rendered.

The content can be made visible and rendered later by using JavaScript.

Use the <template> tag when you have HTML code you want to use over and over again, but not until you ask for it.

Browser Support

<slot> 53.0 79.0 63.0 10.0 40.0


Attribute Value Description
name   Specifies the name of the slot

Global Attributes

The <slot> tag supports the Global Attributes in HTML.

More Examples


Use JavaScript to get the content from a template, and add it to the page:

function showContent() {
  let temp = document.getElementsByTagName("template")[0];
  let clon = temp.content.cloneNode(true);
Try it Yourself »


Use the content of a template for each item in an array:

  <div class="myClass">I like: </div>

let myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

function showContent() {
  let temp, item, a, i;
  // Get the template element:
  temp = document.getElementsByTagName("template")[0];
  // Get the DIV element from the template:
  item = temp.content.querySelector("div");
  // For each item in the array:
  for (i = 0; i < myArr.length; i++) {
    // Create a new node, based on the template:
    a = document.importNode(item, true);
    // Add data from the array:
    a.textContent += myArr[i];
    // Append the new node wherever you like:
Try it Yourself »


Test browser support for the template element::

if (document.createElement("template").content) {
  /*Code for browsers that supports the TEMPLATE element*/
} else {
  /*Alternative code for browsers that do not support the TEMPLATE element*/
Try it Yourself »