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

dynamic ClassValue.

The stateful case: arrays and object maps can change after hydration, and the runtime helper keeps the parent hash attached to the computed class string.

↩ all examples
syntax · scoped:classvalue · ClassValuestatus · passing mode · live running source
Native element
This div receives a dynamic ClassValue.
Child component
Child receives class="parent-owned dimmed svelte-1ez4t2".
Object class map
Child receives class="parent-owned dimmed svelte-1ez4t2".
Source Current result
Native element dynamicClass = ['parent-owned', { dimmed: dynamicDimmed }] <div class={['demo-card', dynamicClass]}>
Native element demo-card parent-owned dimmed svelte-parent pink and faded
Child component dynamicClass = ['parent-owned', { dimmed: dynamicDimmed }] <ChildCard scoped:class={dynamicClass} />
Child component child-card parent-owned dimmed svelte-parent svelte-child has parent hash
Object class map dynamicClassMap = { 'parent-owned': true, dimmed: dynamicDimmed } <ChildCard scoped:class={dynamicClassMap} />
Object class map child-card parent-owned dimmed svelte-parent svelte-child has parent hash
category · classvalue
sheet · sheet 01 / 01
⟳ to re-run