Iterate over slots (children) in svelte 3

user_7199720 0
Viewed 4144

I wanted to wrap all slots of my custom component. But I couldn't iterate over the slots. My custom component usage looks like:

<Tab>
    <span slot="header">Tab Header 1</span>
    <span slot="header">Tab Header 2</span>
    <span slot="header">Tab Header 3</span>

    ... maybe other slots that are not "header"
</Tab>

Then inside Tab.svelte:

{#each ?? as slot}
    <a class="tab-item">
        <each-slot />
    </a>
{/each}

Above, I am trying to iterate over the children/slots named "header" and wrap them with an anchor tag. How can I do that?

Edit: I don't want to pass javascript objects like: 

<Tab headers={['Header 1', 'Header 2', 'Header 3']}>
svelte
2 Answers

It's not possible to iterate over slots. An easier way to do what you describe is to use the context API to have the tabs and their panels work together.

Here's an example of what I'm talking about — we should probably get round to tidying this up and making it available as an npm package, but hopefully it's a good enough base to build upon in its current state.

user_27423960

try this

let slots = $$props.$$slots
user_101549590
Related