Passing values from slot to parent

From the documentation of slots it seems it should be possible to bind values of a component to a slot:

Slots can be rendered zero or more times, and can pass values back to the parent using props. The parent exposes the values to the slot template using the let: directive.

but it seems that the real situation is different: this REPL triggers the error Cannot bind to a variable declared with the let: directive (10:32).

Expected behavior Binding a variable in a slot, which is bound to a variable in the parent component, should work normally as it would if I manually substituted the slot content inside the container.

Severity This underpins the possibility of developing a lot of components that take care of boilerplate code for my application, so in my case this effectively blocks my usage of Svelte for the project.

[stefan-pdx]

Hi,

I came across a similar/relevant issue where I’m wanting to use slot props to pass a value to a parent component so that it can be bound to a specific element in the slot. This would allow the component containing the slot to access the DOM element in onMount.

For example,

<Field let:input={input}>
    <label>X</label>
    <input bind:this={input}/> <!-- Cannot bind to a variable declared with the let: directive -->
</Field>

Here’s a REPL that illustrates the same issue: https://svelte.dev/repl/94dfa039dfd645ad8265609377873457?version=3.20.1

My intention is for the Field component to be able to access the input DOM element in onMount.

I’ve tried passing a variable input into Field as a prop and also binding it to the input, however when onMount is called in Field, it appears that the reference to the input element is null.

Is it possible for Svelte to support this type of binding?

[JacobZwang]

I’m confused why this issue never went anywhere. This seems like a bug to me. If I make a component like this:

<script>
	let value = "text";
</script>

<input bind:value> {value}

everything works as expected. The input’s value is bound to the value variable.

However, if I do the exact same thing using a slot, it throws the error Cannot bind to a variable declared with the let: directive.

<!-- Component.svelte -->
<script>
	export let value = "text";
</script>

<slot {value}/> {value}

<script>
	import Component from "./Component.svelte";
</script>

<Component let:value>
	<input bind:value>
</Component>

And it’s not like this binding is impossible, because it can easily be solved by using some boilerplate to create an intermediary variable between the 2 components.

<script>
	import Component from "./Component.svelte";
	let value;
</script>

<Component bind:value>
	<input bind:value>
</Component>

So from my understanding, what’s happening is something like this. Why is it that using a slot requires creating an intermediary variable? Is there something I’m missing?

If you only have 1 component, this isn’t too bad, but if you have lots of components you have to create a variable for each one. let value, value2, value3, value4 ...

If I can be of any help in fixing this let me know. I would be happy to submit a PR if someone could point me in the right direction. This issue makes building composable components very impractical since in order to consume them you must define your own variable to bind to.