<slot> Shadow DOM slot
Marks the spot in a web component where outside content gets inserted.
<slot> lives inside the shadow root of a web component and marks where the component's light DOM children show up. A child with a matching slot attribute lands in the named slot. Everything else lands in the default slot.
Whatever you write between the slot tags is fallback, displayed when nothing is assigned. In ordinary page HTML outside a shadow root it does nothing. This is advanced territory, used when building custom elements.
Named slots and default content are explained in the slot element in the HTML Living Standard (opens in a new tab). You will usually find it inside a template.
Syntax
<template shadowrootmode="open">
<slot name="title">Fallback</slot>
</template>When to use it
Say you are building a reusable component, a card or a modal shell or a profile badge, and page authors should drop their own content into fixed spots. Those spots are <slot> elements. The component owns layout and styles. Authors fill in the title, image or body with matching slot attributes, and anything without a name goes to the default slot.
A normal website with no custom elements has no use for slots. To repeat a header on every page, use a static site generator, a template system or server-side includes. Grouping content is still done with plain elements like article and section.
Styling gets tricky because slotted elements stay in the page's light DOM. The page's own CSS still applies to them and, for normal rules, beats the component's styles. From inside the shadow tree, ::slotted() reaches only the top-level elements assigned to a slot and none of their children. Agree on which side owns which styles. Slot does nothing outside a shadow root, which you usually create with a template.
Attributes
| Attribute | What it does |
|---|---|
name | Name of the slot. Children with slot="name" go here. |
Live example
Edit the code and watch the preview.
<user-card>
<template shadowrootmode="open">
<p>Name: <slot name="username">Unknown</slot></p>
</template>
<span slot="username">Ana</span>
</user-card>More examples
Profile card with named slots
The component has spots for a photo, a name and a role, and a default slot for everything else. Each of the author's elements picks its spot with the slot attribute. Their order in the source does not matter.
<profile-card>
<template shadowrootmode="open">
<style>div{border:1px solid #ccc;padding:1em;max-width:16em}</style>
<div>
<slot name="photo"></slot>
<h2><slot name="name">Unnamed</slot></h2>
<p><slot name="role">No role yet</slot></p>
<slot></slot>
</div>
</template>
<span slot="role">Head chef</span>
<img slot="photo" src="avatar.svg" alt="" width="80" height="80">
<span slot="name">Mia Rossi</span>
<p>Cooks pasta by hand every morning.</p>
</profile-card>When nothing is slotted
Here are two copies of one badge. The first passes a status into the slot. The second passes nothing and shows the fallback text written between the slot tags. The slot is named on purpose, since even whitespace between the tags would count as content for a default slot.
<status-badge>
<template shadowrootmode="open">
<strong>Status: <slot name="status">Unknown</slot></strong>
</template>
<span slot="status">Shipped</span>
</status-badge>
<br>
<status-badge>
<template shadowrootmode="open">
<strong>Status: <slot name="status">Unknown</slot></strong>
</template>
</status-badge>Tip: Give each slot some fallback content.
Browser support
slot works in all current browsers as part of Shadow DOM, defined jointly by the HTML Living Standard and the DOM Standard (Shadow DOM support (opens in a new tab)). To create the shadow root in HTML with shadowrootmode, you need declarative shadow DOM, which every major browser has shipped since 2024. With no shadow root, slot does nothing.
Accessibility
Assistive technology reads slotted content where it ends up in the composed tree, so arrange the slots in a logical reading order (WCAG 1.3.2). Reading order is explained in the W3C note Understanding Meaningful Sequence (opens in a new tab).
Common mistakes
Wrong
<my-card><h2 slot="heading">Hi</h2></my-card>
<!-- shadow: <slot name="title"> -->Right
<my-card><h2 slot="title">Hi</h2></my-card>
<!-- shadow: <slot name="title"> -->Unless the slot attribute matches the slot name exactly, the content stays hidden.
Frequently asked questions
What is a named slot?
One with a name. A <slot name="title"> in a component's shadow root accepts only the light DOM children that carry slot="title". A slot with no name is the default slot and takes all remaining children. Anything between the slot tags is fallback, shown when nothing is assigned to that slot.
Can I use slot outside a web component?
You can, technically, since the element is valid anywhere. It only does something inside a shadow tree, though, where it marks the position for content from the host element. Outside shadow DOM it acts like a plain inline container. Slots come from attachShadow() or a declarative <template shadowrootmode>. Wikipedia's Web Components (opens in a new tab) article explains the wider technology.