HTML <slot> Tag

Description

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.

Properties

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

Example

<template id="element-details-template">
<style>
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;
}
</style>
<details>
<summary>
<code class="name">
&lt;<slot name="element-name">NEED NAME</slot>&gt;
</code>
<span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
</summary>
<div class="attributes">
<h4>Attributes</h4>
<slot name="attributes"><p>None</p></slot>
</div>
</details>
<hr />
</template>

Attributes

Attribute Definition
name The slot's name.

Global Attributes

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

Event Attributes

None

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
7953634010
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
53634110653

Last updated by CSSPortal on: 30th March 2024