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

Next lesson: Declarative shadow DOM

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies