HTML <slot> Tag


The HTML <slot> tag is used in web development to define a placeholder within a web component where external content can be inserted. It is particularly useful when creating custom reusable web components, allowing developers to specify a designated location within the component where content from the DOM (Document Object Model) or other components can be dynamically added. This enables a more flexible and customizable approach to building web interfaces by allowing developers to slot content into predefined areas within their custom components, enhancing reusability and modularity in web development.


Permitted Parents
Any element that accepts phrasing content
Start/End Tags
Start tag: required, End tag: required


<template id="element-details-template">
details {
font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
.name {
font-weight: bold;
color: #217ac0;
font-size: 120%;
h4 {
margin: 10px 0 -8px 0;
background: #217ac0;
color: white;
padding: 2px 6px;
border: 1px solid #cee9f9;
border-radius: 4px;
.attributes {
margin-left: 22px;
font-size: 90%;
.attributes p {
margin-left: 16px;
font-style: italic;
<code class="name">
&lt;<slot name="element-name">NEED NAME</slot>&gt;
<span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
<div class="attributes">
<slot name="attributes"><p>None</p></slot>
<hr />


Attribute Definition
name The slot's name.

Global Attributes

The <slot> tag also supports the Global Attributes in HTML5

Event Attributes


Browser Support

The following table will show you the current browser support for the HTML <slot> tag.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 30th March 2024