logo svelte /scoped props v0.1.0

Spread forwarding

scoped: is syntax, not object data. That means scoped intent must be expressed in markup before a spread object exists.

<MiddleChild scoped:class="parent-owned" />
<MiddleChild scoped:class="parent-owned" />

After the preprocessor runs, the middle component receives a normal class prop with the parent hash attached.

<script lang="ts">
    let props = $props()
</script>

<FinalChild {...props} />
<script lang="ts">
    let props = $props()
</script>

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

    interface Props {
        class?: ClassValue
    }

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

<article class={props.class}>
    Forwarded child
</article>
<script lang="ts">
    import type { ClassValue } from 'svelte/elements'

    interface Props {
        class?: ClassValue
    }

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

<article class={props.class}>
    Forwarded child
</article>

What does not work

There is no object-spread equivalent of scoped:class.

<!-- Invalid idea -->
<MiddleChild {...{ 'scoped:class': 'parent-owned' }} />
<!-- Invalid idea -->
<MiddleChild {...{ 'scoped:class': 'parent-owned' }} />

Scope before spread. Once transformed, the prop can be forwarded normally.