HTML Slots: Making Web Components Customizable
The <slot> element is a placeholder inside a Web Component, letting you inject your own markup. It makes components flexible, like a card with customizable header and body sections. The footgun: content without a slot attribute goes to the default slot.
Why it exists
Web Components are designed for encapsulation and reuse. But a fully encapsulated component is inflexible if its content is hardcoded. To create a truly reusable component, like a modal or a card, you need a way to define its structure and style while allowing the user to provide the actual content. Slots solve this by creating designated insertion points.
The mental model
A <slot> is a portal in a Web Component's Shadow DOM. It acts as a placeholder that gets filled by markup you provide from the outside (the Light DOM). Think of a component's template as a picture frame; slots are the openings where you can insert your own photos (content), making the frame reusable for different images.
How it works
Inside a Web Component's <template>, you place <slot> elements. A slot can be named using the name attribute, like <slot name="header">. When you use the component in your HTML, you provide child elements with a matching slot attribute, like <h1 slot="header">My Title</h1>. This h1 is then projected into the header slot's position. Any child element without a slot attribute is rendered in the first unnamed <slot>, which is known as the "default slot". You can also provide default content inside a slot tag, which will be rendered if no content is provided for that slot.
When to use it
Use slots whenever you build a Web Component that needs to display user-provided markup. This is fundamental for creating flexible design system components like dialogs, page layouts, cards, and tabs, where the component's "chrome" (wrapper, styles, behavior) is consistent but its content changes with each use.
When not to use it
If a component's content is always static and internal, it doesn't need slots. For example, a self-contained SVG loading spinner with no text doesn't need to accept external content. Slots are a feature of Web Components and have no special meaning outside of a component's Shadow DOM.
One canonical example
Consider a <profile-card> component. Its template could have <slot name="avatar"></slot> and <slot name="username">Anonymous</slot>. To use it, you'd write <profile-card><img slot="avatar" src="/me.png">Alice</profile-card>. The img goes into the avatar slot. Because the span has no slot attribute, it goes into the default slot, which we can assume is for the username. If you provided no username, it would display "Anonymous".
Interview question
Which scenario best illustrates the primary benefit of using HTML slots in a Web Component?
- a.Creating a component whose content is always the same and never changes.
- b.Allowing a component to display different user-provided content in designated areas.Correct
- c.Defining a component's lifecycle callbacks for custom behavior.
- d.Encapsulating a component's internal CSS styles to prevent global conflicts.
Why? this is the answer
Slots are designed to make Web Components flexible by providing designated insertion points for user-provided markup, allowing the component's structure to remain consistent while its content varies. Option D describes a benefit of Shadow DOM encapsulation, not slots themselves.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on html — each one lists the topics its interview covers.
See open roles