CSS ::slotted(): style only the assigned element

When to use it

A case-panel component accepts a named title slot. The component styles an assigned heading and preserves normal wrapping for a long case name. It also gives its internal slot a readable fallback style for the case where no title is supplied. A consumer might pass a heading containing a strong element; ::slotted(h2) reaches the heading box, not that nested strong element. Put any descendant typography in the light DOM stylesheet or expose a stable part if the component owns the inner markup. Test an assigned heading, a plain text assignment, no assignment, and a title long enough to wrap at 200% zoom. Do not turn the slot into a visual-only label for a panel that requires a programmatic name; the component's accessibility relationship needs a separate review.

slot[name="title"] { color: #173441; }
::slotted([slot="title"]) { display: block; margin: 0; font: 700 1.2rem/1.35 system-ui; overflow-wrap: anywhere; }

Cost and verification

The selector itself is cheap. The integration cost appears when callers supply a different node shape from the one the stylesheet anticipated. Because text nodes do not match ::slotted(), a consumer that passes bare text may display it with inherited styles instead of the assigned-element rule. Prefer an explicit element contract for consistent typography. Do not write a descendant selector after ::slotted() and expect it to penetrate light DOM children. Slot assignment is an HTML behavior; CSS only paints the resulting boxes. Verify that fallback content is acceptable when the assigned slot is absent.

Common Mistakes

• Do not expect ::slotted() to style grandchildren of an assigned element.
• Do not expect bare text to match an element selector.
• Do not use visual slot styling as a substitute for an accessible name.

Connected lessons

• CSS Property Decisions
• CSS :host: make a component variant an explicit host contract
• CSS ::part(): expose a narrow styling surface across Shadow DOM
• HTML slots: assign light-DOM content and keep a fallback
• HTML declarative shadow DOM: parse a component boundary from markup