Slot and shadow boundary
Learn the shadow boundary and slot distribution.
What is a slot?
A slot is a placeholder inside shadow DOM that displays content from outside. The custom element hides its internal structure in shadow DOM, while placing the user's children into slots.
There are two kinds: a plain <slot> (default) takes any child; <slot name="avatar"> takes only the child carrying slot="avatar". This keeps the shadow DOM skeleton encapsulated from the outer world.
Using named slots
To use a named slot, add a slot attribute to the child. For example, <h2 slot="name">Alex</h2> is distributed into the <slot name="name"> in shadow DOM. Names that don't match go to the default slot.
This lets the same custom element work with different content: the card title appears in one place, the avatar in another. The user only needs to know slot names, not the internal structure.
Exercise Write slot content for profile-card
Write a <profile-card> element with three children, each distributed to a slot:
<img slot="avatar">with non-empty src<h2 slot="name">with non-empty content (name)<p slot="bio">with non-empty content (bio)
End with the </profile-card> closing tag.
Show example solution
<profile-card>
<img slot="avatar" src="/user/alex/avatar.png" alt="Alex Morgan avatar">
<h2 slot="name">Alex Morgan</h2>
<p slot="bio">Product designer, lives in London.</p>
</profile-card>Test yourself
-
Where do children marked with the slot attribute actually live?
<profile-card> <h2 slot="name">Alex</h2> </profile-card>- They stay in the light DOM; they're not copied into shadow DOM
- They're copied into shadow DOM and removed from light DOM
- They're split off as a document fragment
- They're moved into a template
Show answer
They stay in the light DOM; they're not copied into shadow DOM — Correct. Slot distribution is visual; the child stays in light DOM and is only rendered at the slot position.
-
Complete the attribute for a named slot
<img src="/user/alex/avatar.png" alt="Alex" ____="avatar">Show answer
<img src="/user/alex/avatar.png" alt="Alex" slot="avatar"> -
Match each slot name to its purpose
- avatar
- Profile picture
- name
- User name
- bio
- Short bio
- actions
- Button group