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.