The HTML <slot> tag
The HTML <slot> element is a placeholder inside a web component's shadow DOM where the host element's content is projected. Give it a name for named slots, which the host's content targets with the slot attribute.
Overview
The <slot> element is part of the Web Components shadow DOM. It marks the spot inside a component's template where the consumer's own content should appear — a placeholder that projected (light-DOM) content fills in.
A component can have one default (unnamed) slot and several named slots. To target a named slot, the host's content uses the slot attribute — for example a <span slot="title"> fills the component's <slot name="title">. Any content you place between a slot's tags is fallback, shown when nothing is projected into it. The slotchange event fires when the assigned nodes change.
One naming caution worth flagging: this <slot> element is distinct from the slot attribute that consumers put on their content to choose a target — they work together but are different things.
Syntax
<!-- inside the component's shadow DOM -->
<slot name="title">Default title</slot>
<slot></slot>Attributes
The <slot> element supports the following attributes, in addition to the global attributes available to every HTML element.
| Attribute | Value | Description |
|---|---|---|
name |
A string (the field name used in the submitted data). | Names a form control for submission. |
Example
<!-- Used inside a custom element's shadow DOM -->
<div class="card">
<h2><slot name="title">Untitled</slot></h2>
<slot>No content provided.</slot>
</div>Best practices
- Use a default slot plus named slots to give a component flexible content areas.
- Target a named slot from the host with the
slotattribute on your content. - Provide fallback content between the slot's tags for when nothing is projected.
- Listen for the
slotchangeevent to react when the projected content changes.
Frequently asked questions
What is the slot element?
What is the difference between a default slot and a named slot?
slot attribute; a named slot receives content whose slot attribute matches its name.How do I fill a named slot?
slot="name" attribute to your content so it is projected into the matching <slot name="name">.What is the difference between the slot element and the slot attribute?
<slot> element is the placeholder in the component; the slot attribute is what the consumer puts on content to choose which slot it fills.