Make :let directive value available in slot definition

[dasDaniel]

Is your feature request related to a problem? Please describe.

I'd like to have the slot variables available within the definition. Currently I cannot use the variable to define value for class attribute

Describe the solution you'd like

ie:

<ListboxOption value={item} let:active class="{active ? 'i-am-active' : 'nope'}">{item.name}</ListboxOption>

Describe alternatives you've considered

I can retrieve the activeValue value, in this scenario, from another component higher up the chain and compute.

<ListboxOption value={item} let:active class="{activeValue === item ? 'i-am-active' : 'nope'}">{item.name}</ListboxOption>

alternatively, I could just nest the element

How important is this feature to you?

a nice to have

Additional context

reference: https://github.com/dasDaniel/svelte-listbox/blob/master/example/src/App.svelte

[antony]

I can't really figure out what you're trying to do here, because it's not clear where activeValue and active come from. A REPL would be useful.

Howeve, this isn't how you'd apply that class. You'd use the class directive:

<ListboxOption value={item} class:i-am-active={active}>{item.name}</ListboxOption>

Not sure if this helps you or not.

[dasDaniel]

this seems entirely unrelated

A component can provide a variable to back to the parent, as documented here: https://svelte.dev/docs#slot_let

this is how it is expected to work

<!-- App.svelte -->
<FancyList {items} let:prop={thing}>
	<div>{thing.text}</div>
</FancyList>

<!-- FancyList.svelte -->
<ul>
	{#each items as item}
		<li class="fancy">
			<slot prop={item}></slot>
		</li>
	{/each}
</ul>

however if I wanted to use prop in the component definition (like for id, class, aria, etc...) it fails because the property/variable is not defined

THIS WORKS

<!-- App.svelte -->
<FancyList {items} let:prop={thing}>
	<div>{thing.text}</div>
</FancyList>

DOES NOT WORK, BUT I WOULD LIKE IT TO

notice that the {thing.text} moved out of the content into, what I've referred to as, the definition of the component

<!-- App.svelte -->
<FancyList {items} let:prop={thing} id={thing.text}>
	<div></div>
</FancyList>

example repl:

https://svelte.dev/repl/2bb7298f885f403eb6cfe1decaa413de?version=3.23.2

[tanhauhau]

It will not going to work this way.

1. the prop={item} you provided in the <slot> is for the content of the default slot, which is anything within <FancyList></FancyList> but not for <FancyList> itself.

2. the behavior you want happen is actually a chicken and egg situation, you need to initialise FancyList in order to get the value for let:prop from the FancyList, however you can't initialise FancyList without the value of id which comes from within FancyList.

3. Based on the example from the REPL

<FancyListItem {item} let:className class={className}>
    <div>{className}</div>
</FancyListItem>

• className is computed within FancyListItem, there's no reason to need to pass in as props of FancyListItem

[dasDaniel]

I understand, and suspect that it will not be feasible.

re:

• className is computed within FancyListItem, there's no reason to need to pass in as props of FancyListItem

just want to note that this is an example of what is not working. In a RWA, I would be doing something like providing a boolean to the parent, so the parent may assign the class.

<ListboxOption
  value={item}
  let:active
  class:lb-active="{active}"
>{item.name}</ListboxOption>

this would allow for easier creation of reusable components where the styling can be be determined by the parent component, without having to provide a huge list of potential parameters that the implementation may use.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ali-garajian]

the example in the tutorial of this subject does not work either!

https://svelte.dev/tutorial/slot-props