::Slotted

What Is ::slotted()?

The ::slotted() CSS pseudo-element represents any element that has been placed into a slot inside an HTML template. This powerful selector is essential for styling composed web components, allowing developers to style slotted content from within the shadow DOM while maintaining proper encapsulation boundaries.

When building reusable web components, the slot mechanism enables composition--child elements defined outside the component can be projected into specific positions within the component's shadow tree. The ::slotted() pseudo-element provides the bridge to style these composed elements from within the component's encapsulated context.

The slot system is a cornerstone of modern web component architecture, enabling flexible component composition while preserving style boundaries between light DOM and shadow DOM contexts.

MDN Web Docs provides the authoritative specification for this pseudo-element and its role in the CSS Scoping Module.

Understanding Slots in Web Components

Slots are placeholders inside a web component's shadow DOM that accept content from the light DOM. This composition model allows developers to create flexible, reusable components that can accept different content while maintaining consistent styling and structure.

The slot mechanism operates on a simple but powerful principle: elements in the light DOM with a slot attribute matching a slot's name are projected into that slot position within the shadow tree. This separation of concerns enables component authors to focus on structure and styling while giving component consumers freedom over content.

Default Slot

The default slot serves as a catch-all for any content that doesn't specify a named slot. When multiple elements without slot attributes are provided as children, they all render in the default slot position. This pattern is commonly used for main content areas, body text, or any flexible content projection.

<template>
 <div class="card-body">
 <slot></slot> <!-- Default slot -->
 </div>
</template>

Named Slots

Named slots enable precise content placement within a component. Each named slot accepts only elements with a matching slot attribute value. This pattern supports complex component designs with multiple content areas such as headers, footers, sidebars, and main content sections.

<template>
 <header>
 <slot name="header"></slot>
 </header>
 <main>
 <slot name="content"></slot>
 </main>
 <footer>
 <slot name="footer"></slot>
 </footer>
</template>

Web.dev offers Google's comprehensive guide on slot composition patterns for modern web applications.

The ::slotted() Pseudo-Element

The ::slotted() pseudo-element allows styling of elements that have been placed into a slot from within the component's shadow DOM CSS. This is crucial because slotted elements technically exist in the light DOM--yet ::slotted() provides a mechanism to style them from within the encapsulated context.

This cross-boundary styling capability solves a common challenge: how can a component apply base styles to slotted content without affecting other elements on the page? The answer lies in the unique positioning of ::slotted()--it bridges the shadow DOM boundary while respecting encapsulation.

Syntax

/* Selects any element placed inside a slot */
::slotted(*) {
 font-weight: bold;
}

/* Selects any span placed inside a slot */
::slotted(span) {
 color: #0066cc;
}

/* Selects elements matching a class within a slot */
::slotted(.highlight) {
 background-color: yellow;
}

/* Selects specific element types with classes */
::slotted(div.content) {
 padding: 1rem;
}

The MDN Web Docs provide complete syntax documentation and browser compatibility details for this selector.

Limitations and Considerations

Cannot Style Children of Slotted Elements

The ::slotted() selector can only target the top-level element placed into a slot. It cannot traverse into the children of that element. This limitation exists because ::slotted() represents the element as it was placed into the slot, not as a virtual element within the shadow tree.

/* This works - targeting the slotted element directly */
::slotted(div.content) {
 color: blue;
}

/* This does NOT work - cannot target children */
::slotted(div.content) span {
 color: red;
}

/* Alternative approach - use CSS custom properties */
::slotted(div.content) {
 --nested-color: blue;
}

::slotted(div.content) span {
 color: var(--nested-color);
}

Cannot Style Text Nodes

Text nodes placed directly into a slot without an element wrapper cannot be targeted with ::slotted(). The pseudo-element only matches element nodes, not text content.

Limited Pseudo-Element Support

Certain tree-abiding pseudo-elements can follow ::slotted():

::slotted(*)::before {
 content: "→ ";
}

::slotted(button)::after {
 content: " ↵";
}

CSS-Tricks documents practical web component styling patterns including these limitations.

Best Practices

Use for Base Styling Only

Reserve ::slotted() for applying foundational styles--typography, spacing, colors that establish a consistent look. For comprehensive theming or customization needs, combine ::slotted() with CSS custom properties:

::slotted(.content) {
 font-family: var(--card-font-family, system-ui);
 font-size: var(--card-font-size, 1rem);
 color: var(--card-text-color, #333);
 line-height: var(--card-line-height, 1.6);
}

This approach gives consumers control through CSS custom properties while maintaining consistent defaults across your component library. By combining these techniques, you create a flexible system that supports both component encapsulation and end-user customization without compromising either goal.

For teams building enterprise-scale applications, following web development best practices ensures maintainable, scalable component architectures.

Combine with Slot Names

When components have multiple named slots, use ::slotted() with the slot attribute selector to style content appropriately for each position:

::slotted([slot="header"]) {
 font-size: 1.25rem;
 font-weight: 600;
}

::slotted([slot="footer"]) {
 font-size: 0.875rem;
 color: #666;
}

Provide Fallback Content

Always provide meaningful fallback content within <slot> elements. This ensures components render correctly even when consumers don't provide slotted content, improving the resilience of your component library.

Sources

1. MDN Web Docs - ::slotted() - Official documentation for the ::slotted() pseudo-element
2. CSS-Tricks - Web Component Pseudo-Classes and Pseudo-Elements - Practical web component styling patterns
3. Web.dev - Template, slot, and shadow - Google's guide on slot composition
4. CSS Scoping Module Level 1 - W3C specification for slotted pseudo-element
5. Southleft - Demystifying Web Components: Understanding Slots - Advanced styling techniques