The <slot> Element
As defined in the HTML Living Standard, the <slot> element is a placeholder inside a web component (Shadow DOM) that you can fill with your own markup from the outside.
<!-- Inside the Web Component Template -->
<div class="card">
<h3>Card Title</h3>
<slot>Default content if nothing is provided</slot>
</div>
<!-- In the HTML Page -->
<my-card>
<p>This text fills the slot!</p>
</my-card>Slots are the key to creating flexible, reusable components that remain accessible by allowing the user to provide the semantic content.
View HTML Living Standard: The slot elementAccessibility Impact: The Shadow DOM Barrier
Web components use a "Shadow DOM" to encapsulate styles and structure. This can sometimes create challenges for assistive technology.
WCAG Requirement: Name, Role, Value
Success Criterion 4.1.2 (Level A): Name, Role, Value.
When using slots, ensure that the content being slotted in maintains its semantic meaning. If you are slotting a button into a custom component, the button must still be a <button> so that its role and state are correctly exposed to the accessibility tree, regardless of the component's internal structure.
Best Practices for Accessible Slots
- Named Slots: Use named slots (
) to ensure that content is placed in the correct structural position, which helps screen reader users understand the page layout. - Fallback Content: Always provide meaningful fallback content inside the
<slot>tag for cases where the user doesn't provide any. - Avoid Deep Nesting: Excessive nesting of slots and shadow roots can make it harder for some assistive technologies to map the relationship between elements.
A11y Tip: Slotting ARIA Labels
If your custom component needs a label, provide a slot specifically for the label. This allows the developer using your component to provide a descriptive, accessible name that fits the specific context of their page.