How to bind the data to slot

[karchung0930]

I have the below on +layout.svelte:

let test;

<Header />
<slot />
<footer />

I want to make the test to be available on every child page (the slot in this case since this is +layout.svelte), and they are able to update the test.
I try <slot bind:test /> but it shows test is not a valid binding. Any right way to do this?

[brunnerh]

You cannot pass data to slots in SvelteKit since the code that uses the components is autogenerated.
Slot properties also cannot be bound, they are one-way.

Your options are either:

• Using the layout's load function - any data returned from there will be available in the data property of the layout and any child layouts/pages.
  The data cannot be changed in a child to update the parent.
• Setting it as a context - the context can be retrieved in any descendant.
  If the data should be reactive from child to parents (e.g. the page changes the value and the layout updates), you need to use a writable store (or in Svelte 5 a $state object whose properties can be changed).