Syntax

Use scoped:<propName> on a component tag when the parent intentionally passes one of its scoped CSS classes through a child prop.

<ChildCard scoped:class="parent-owned" />
<FancyCard scoped:internalClass="inner-panel" />

<ChildCard scoped:class="parent-owned" />
<FancyCard scoped:internalClass="inner-panel" />

The directive target is the prop name after scoped:.

<FancyCard scoped:internalClass="inner-panel" />

<FancyCard scoped:internalClass="inner-panel" />

becomes:

<FancyCard internalClass="inner-panel svelte-abc123" />

<FancyCard internalClass="inner-panel svelte-abc123" />

Component tags only

Use scoped: on components, not native elements.

<ChildCard scoped:class="parent-owned" />
<motion.div scoped:class="parent-owned" />

<ChildCard scoped:class="parent-owned" />
<motion.div scoped:class="parent-owned" />

Native elements already live in the current component, so normal class behavior is the right tool.

<div class="parent-owned" />

<div class="parent-owned" />

Explicit values only

The directive must include a value.

<ChildCard scoped:class="parent-owned" />
<ChildCard scoped:class={['parent-owned', { active }]} />

<ChildCard scoped:class="parent-owned" />
<ChildCard scoped:class={['parent-owned', { active }]} />

No duplicate target prop

Do not combine scoped:class and class on the same component.

<!-- Invalid -->
<ChildCard scoped:class="parent-owned" class="other" />

<!-- Invalid -->
<ChildCard scoped:class="parent-owned" class="other" />

The transform rejects this because it would be unclear which value should win.