logo svelte /scoped props v0.1.0
FIG-001/ SPREAD

spread forwarding.

The parent scopes the value at the boundary. After that, a middle component can spread the prop to a third child because the scoped class string is already just normal prop data.

↩ all examples
syntax · scoped:classpath · parent → middle → childstatus · passing mode · live running source
Native element
This div receives the parent class directly.
Middle spread to third child
Middle child forwards props with spread
Third child receives class="parent-owned svelte-160oiqm".
Source Current result
Native element <div class="demo-card parent-owned">
Native element demo-card parent-owned svelte-parent baseline
Forwarded scoped prop <MiddleSpreadCard scoped:class="parent-owned" /> <SpreadGrandchildCard {...forwardedProps} />
Third child grandchild-card parent-owned svelte-parent svelte-grandchild has parent hash
Parent spread boundary <MiddleSpreadCard {...propsWithClass} />
Still not magic propsWithClass.class = 'parent-owned' does not express scoped intent at the parent call site
category · spread
sheet · sheet 01 / 01
⟳ to re-run