This question is in reference to
Pass in a slot to a recursive component
App.svelte
<script> import Tree from './Tree.svelte'; const items = [ { type: 'person', first: 'Maru', last: 'Doe', children: [ { type: 'person', first: 'Pochi', last: 'Doe' }, { type: 'person', first: 'Tama', last: 'Doe' }, { type: 'thing', manufacturer: 'ACME', product: 'missiles' }, ] } ]</script><Tree {items} let:item> {#if item.type == 'person'} {item.last}, {item.first} {:else if item.type == 'thing'} {item.product} ({item.manufacturer}) {/if}</Tree>
Tree.svelte
<script> export let items; export let level = 0;</script><div style:margin-left="{level * 20}px"> {#each items as item} {(console.log({item}),'')} ---> all items are shown here<slot item={item} /><svelte:self items={item.children ?? []} level={level + 1} let:item={child}><slot item={child} /></svelte:self> {/each}</div>
In Tree.svelte, if we remove <slot item={child} />
only the parent item is shown i.e. Maru Doe.
But we have the following line(in Tree.svelte) <slot item={item} />
and if we console print item
we get all the items i.e. Pochi, Tama, ACME. Should <slot item={item} />
not pass item
to the parent (App.svelte) for the items to be printed in each recursion?
So, why are these not displayed when removing <slot item={child} />?When is <slot item={child} />
called? Is it like this, svelte:self calls itself recursively and when the last child object is reached, <slot item={child} />
is called?