Is there a way to access children without rendering

[tomasz13nocon]

I'd like to have a Select component that is used like so:

<Select bind:value>
  <SelectItem value="one">Some <b>arbitrary</b> markup</SelectItem>
  <SelectItem value="two"><SomeComponent /></SelectItem>
</Select>

Select's children get rendered in a dropdown only when it is expanded, which means it doesn't render by default.
The Select component needs to render the selected item even when unexpanded.

The way I wanted to do this is for SelectItem to send its children up to Select via context. This works great, but the problem appears when Select has a default value. Before Select is expanded for the first time, its children haven't rendered, and the code which sends SelectItem children to Select has not ran.

I understand that snippets are just functions but is there a way to somehow access SelectItem's children from Select, before SelectItems get rendered?

My current workaround looks like this, obviously not ideal:

// Select.svelte
<script>
  let rendered = $state(false);
  $effect(() => {
    rendered = true;
  });
</script>

{#if !rendered}
  <div class="hidden">
      {@render children?.()}
  </div>
{/if}

Playground simple reproduction

[brunnerh]

The answer is "no".

You could restructure your code, so there is no SelectItem at all. I.e. you pass the item data as prop, potentially including snippet instances for custom templating, and Select does the rest.

{#snippet option3()}
	<strong>Strong</strong> option 3
{/snippet}

<Select options={[
	{ value: 1 },
	{ value: 2, label: 'Option 2' },
	{ value: 3, template: option3 },
]} />

A very rough sketch of this approach.

[zyxd]

Not sure if I understand correctly, you need something like this?
https://svelte.dev/playground/b141c402c05e4ba581a7e177a946278e?version=5.1.4

In this example <SelectItem> does not have a template - it is implemented in <Select>. If you need to implement a template in <SelectItem> you can give it the ability to decide whether to show or not <button> by passing the open property from the parent.

[tomasz13nocon]

That's exactly what I needed, thank you! Simple, clever solution.

One question: Are the SelectItems here guaranteed to be in correct order? So will the components always run in the order they're defined in markup?

[zyxd]

So will the components always run in the order they're defined in markup?

Yes, but I did not see exact confirmation in the documentation.

If you need to be sure of the order in which children are rendered (in this example) you can make the order property for SelectItem and sort them before render in Select. Then even data coming asynchronously will be rendered in the correct order.

[Leonidaz]

Based on other questions asked before, this can be done through snippets defined inside the list and passed in as children like so, which doesn't need an extra component <SelectItem>:

Playground: children snippets inside <Select>

Edit: this is incorrect, context is different:
Not exactly sure of your full use case, you can use the approach outlined by @zyxd (nice one!) but the issue now with this is that the context key is the same for all <Select> components so having more than one instance on a page will end up using the same context and thus shared items between components.

There is a way to avoid it and using context api altogether by wrapping the <SelectItem>'s in the children snippet with a parameter (SvelteMap) that will contain the items added via the <SelectItem> as per the original. So this way, the SvelteMap is per instance of <Select> vs for all <Select>'s

Based on @zyxd's solution but only using props and without using context api. Wrapping the <SelectItem>'s in the children snippet with a parameter (SvelteMap) that will contain the items added via the <SelectItem>.

Playground: Wrap <SelectItems> snippet with SvelteMap per instance

[zyxd]

the issue now with this is that the context key is the same for all <Select> components so having more than one instance on a page will end up using the same context and thus shared items between components

No, because documentation says:

setContext
Associates an arbitrary context object with the current component and the specified key and returns that object. The context is then available to children of the component (including slotted content) with getContext. Like lifecycle functions, this must be called during component initialisation.

getContext
Retrieves the context that belongs to the closest parent component with the specified key. Must be called during component initialisation.

Example: https://svelte.dev/playground/2dcb7a1dd9ea48219b9c2afed0cde3ed?version=5.1.9

[Leonidaz]

ah, interesting. you're totally right!

I assumed that because the module key ("global") is the same, getContext() would get the same value by using the same key when using multiple instances of the same component. But it seems that for each instance a complete separate context is created and the key differences are only relevant to that instance.

Oh well, then just a couple of alternative solutions then.