HTML <slot> Element
The HTML <slot> element defines a placeholder inside a web component's shadow DOM where content supplied to the component can be inserted and displayed.
Syntax
<slot>Fallback content</slot>
<slot name="title">Default title</slot>The <slot> element requires both an opening and closing tag. A slot can be unnamed or given a name that allows particular content to be assigned to it.
Attributes
The <slot> element supports the global HTML attributes and the following element-specific attribute:
| Attribute | Description |
|---|---|
name |
Assigns a name to the slot so content with a matching slot attribute can be placed in that location. |
Example
This example creates a simple web component with named <slot> elements for a heading and description. The content placed inside the custom element is displayed in the matching slots.
Usage Notes
The <slot> element is used with Shadow DOM to determine where content supplied to a custom element appears within the component's internal structure.
An unnamed <slot> acts as the default slot and receives eligible content that has not been assigned to a named slot.
A named slot uses the name attribute. Content outside the shadow tree can be assigned to that slot by giving the content a matching slot attribute.
Content written between the opening and closing <slot> tags acts as fallback content. The fallback is displayed when no content has been assigned to that slot.
The <slot> element is primarily useful when building reusable web components. It does not provide the same content-placement behavior when used as an ordinary element outside a shadow tree.
Accessibility
Content assigned to a <slot> remains part of the document's accessible content, so use appropriate semantic HTML for headings, text, links, buttons, and other content passed into a component.
Fallback content should also be meaningful when it may be displayed. When creating reusable web components, make sure the completed component has a logical structure and remains usable with a keyboard and assistive technologies.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <slot> Element .
Related Elements
The <slot> element is closely related to the <template> element for storing reusable HTML fragments and custom elements that use Shadow DOM to create reusable web components.