The HTML slot attribute
Quick answer
The HTML slot attribute assigns an element to a named <slot> in a web component's shadow DOM, controlling where the host's content is projected. It is a global attribute used with custom elements and templates.
Overview
Web components use <slot> placeholders inside their shadow DOM to decide where the consumer's content should appear. The slot attribute, placed on the consumer's element, says which named slot it belongs to: <span slot="header"> lands in the slot declared as <slot name="header">.
Content without a slot attribute goes into the component's default (unnamed) slot. This projection keeps the consumer's markup in the light DOM while letting the component control layout.
Values
| Value |
|---|
| The name of the slot to assign the element to. |
Example
<!-- Consumer markup for a <user-card> component -->
<user-card>
<span slot="name">Ada Lovelace</span>
<span slot="role">Mathematician</span>
</user-card>Best practices
- Use slot
="name"on content to project it into a matching named <slot>. - Expose stylable elements inside a shadow tree with part, then target them with
::part(). - Forward nested parts upward with exportparts.
- Keep the styling surface (parts) intentional and documented for consumers.
Frequently asked questions
What does the slot attribute do?
Assigns an element to a named slot in a web component's shadow DOM.
How do I style inside a web component from outside?
Expose elements with the part attribute, then target them with the
::part() pseudo-element.How do I fill a named slot?
Is slot a global attribute?
Yes — it is a global attribute, so it can be set on any HTML element (it is a global attribute), within web components.