The <slot> Element
As defined in the HTML Living Standard, the <slot> element is a placeholder inside a web component that you can fill with your own custom markup, which lets you create separate DOM trees and present them together.
<h2 slot="title">My Card</h2>
<p>This content goes into the default slot</p>
</simple-card>
The component defines where the "title" slot and the default slot appear in its internal template.
<template>
<header>
<slot name="title">Default Title</slot>
</header>
<main>
<slot></slot> <!-- Default slot -->
</main>
</template>
View HTML Living Standard: The slot element
Accessibility: The Flattened Tree
A major concern with Web Components is how assistive technology perceives content that is split between the "Light DOM" (user markup) and "Shadow DOM" (internal template).
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Browsers resolve the relationship between content and its container by creating a flattened accessibility tree. Even though the <h2> in the example above is technically a child of the <simple-card> in the main DOM, it is announced as being inside the component's <header> because of the <slot> placement. This ensures that the structural relationships remain perceivable for screen reader users.
Technical Patterns
- Named Slots: Use the
nameattribute (e.g.,<slot name="header">) to create specific injection points. - Default Slot: A
<slot>without a name attribute captures all content that hasn't been assigned to a named slot. - Fallback Content: Any content placed inside the
<slot>tags in the template will be rendered only if no content is provided by the user.
<!-- Template fallback example -->
<slot name="icon">
<img src="default-icon.png" alt="Informational icon">
</slot>
Best Practices
- Semantics Matter: The
<slot>element itself is a "transparent" wrapper. It does not provide a landmark or a role. Use semantic containers (like<nav>or<main>) around your slots in the template to provide structure. - ARIA Across Boundaries: Avoid using
aria-labelledbyoraria-describedbyto link elements that live on different sides of a shadow boundary, as these IDs are isolated. Use<slot>to bring the labeling element into the correct context.
A11y Tip: Logical Focus
Ensure that slotting content doesn't break the natural reading or tab order. When content is "moved" into a slot, it should still make sense within the sequential flow of the component's internal design, satisfying WCAG SC 2.4.3 (Focus Order).