HTML <slot> Tag

<button onclick="showContent()">Show hidden content</button>

<template>
  <slot name="html">HTML</slot>
  <slot name="css">CSS</slot>
  <slot name="js">JAVASCRIPT</slot>
</template>

<script>
function showContent() {
  let temp = document.getElementsByTagName("template")[0];
  let clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

Meaning

The <slot> element is a placeholder inside a web component created using the shadow DOM specification, that you can insert your own markup into.

This allows you to create and combine separate DOM trees.

The name attribute is used to assign slots to other elements.

Note: <slot>slot element with a name attribute creates a named slot to which any element is assigned if that element has a slot attribute whose value matches that name attribute's value, and the slot element is a child of the shadow tree whose root's host has that corresponding slot attribute value.

Version: HTML5

Standard Syntax

<slot name="text">...</slot>
or
<span slot="text">...</span>

Browser Support

Status

Attributes

Global Attributes

The <slot> element also supports the Global Attributes in HTML.

Event Attributes

The <slot> element also supports the Event Attributes in HTML.