<slot>: The Web Component Slot element

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The<slot>HTML element—part of theWeb Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

Attributes

This element includes theglobal attributes.

name: The slot's name. When the slot's containing component gets rendered, the slot is rendered with the custom element's child that has a matchingslot attribute. Anamed slot is a<slot> element with aname attribute. Unnamed slots have the name default to the empty string. Names should be unique per shadow root: if you have two slots with the same name, all of the elements with a matchingslot attribute will be assigned to the first slot with that name.

Examples

html

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

Note:You can see this complete example in action atelement-details (see itrunning live). In addition, you can find an explanation atUsing templates and slots.

Technical summary

Content categories	Flow content,phrasing content
Permitted content	Transparent
Events	`slotchange`
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that acceptsphrasing content
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No`role` permitted
DOM interface	`HTMLSlotElement`