ClassValue

Dynamic scoped props accept Svelte-style ClassValue inputs: strings, arrays, object maps, and falsy entries.

import type { ClassValue } from 'svelte/elements'

import type { ClassValue } from 'svelte/elements'

<script lang="ts">
    import ChildCard from './ChildCard.svelte'

    let selected = $state(false)
    const childClass = $derived(['parent-owned', { selected }])
</script>

<ChildCard scoped:class={childClass} />

<script lang="ts">
    import ChildCard from './ChildCard.svelte'

    let selected = $state(false)
    const childClass = $derived(['parent-owned', { selected }])
</script>

<ChildCard scoped:class={childClass} />

The preprocessor turns the expression into a runtime helper call.

<ChildCard class={__svelte_scoped_props_class(childClass, 'svelte-abc123')} />

<ChildCard class={__svelte_scoped_props_class(childClass, 'svelte-abc123')} />

The helper normalizes the value, removes disabled object-map keys, joins arrays, and appends the parent scope hash.

Typing child props

When a child prop is class-like, type it as ClassValue.

<script lang="ts">
    import type { ClassValue } from 'svelte/elements'

    interface Props {
        class?: ClassValue
    }

    let props: Props = $props()
</script>

<article class={props.class}>
    Child content
</article>

<script lang="ts">
    import type { ClassValue } from 'svelte/elements'

    interface Props {
        class?: ClassValue
    }

    let props: Props = $props()
</script>

<article class={props.class}>
    Child content
</article>

That Props shape is a child component contract. The preprocessor does not inspect the child’s TypeScript types.