Styling Slotted Content

The ::slotted(selector) pseudo-element lets you write CSS rules inside the shadow root that target light-DOM nodes projected into a <slot>. When a consumer places a <p> or <strong> inside your custom element, those nodes remain in the light DOM but are visually rendered inside the shadow tree — ::slotted() is how you style them from within.

::slotted(p) { color: steelblue; }
::slotted(strong) { color: #e11d48; }

The rules above live inside the component’s shadow <style> block. Any <p> or <strong> element that the consumer slots into the component will receive those styles.

Limitations

::slotted() can only match top-level slotted nodes — the immediate children of the host that land in the slot. It cannot reach into the subtree of a slotted element:

::slotted(div span) does not work — you cannot target a <span> nested inside a slotted <div>.
Only compound selectors with a single slotted element are valid.
Specificity of ::slotted() is low — equivalent to (0,0,1,0) — so page styles on the same element can win.

If you need deeper control over slotted subtrees, restructure your HTML to slot the innermost elements directly, or pass CSS custom properties into the shadow root from the page.

Demo

<card-slot>
  <p>Paragraph inside slot</p>
  <strong>Bold inside slot</strong>
</card-slot>