Prop aliases

scoped: is not limited to class. The prop name after scoped: is preserved.

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

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

That becomes:

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

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

Aliases are useful when a component exposes more than one class-like entry point.

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

    interface Props {
        class?: ClassValue
        internalClass?: ClassValue
    }

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

<section class={props.class}>
    <div class={props.internalClass}>
        <slot />
    </div>
</section>

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

    interface Props {
        class?: ClassValue
        internalClass?: ClassValue
    }

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

<section class={props.class}>
    <div class={props.internalClass}>
        <slot />
    </div>
</section>

The parent chooses which child prop receives the scoped class. The child still chooses where that prop is applied.