Passing values from slot to parent

[trenta3]

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.

[JazielGuerrero]

Hi,

The part of the documentation you mention doesn't say what you interpreted. Binding values is different from exposing a property from the slot to the parent. It will be helpful to said what are slot are and use for.

Slots are just placeholder:

The HTML element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

The slot tag will be "replace" with the html markup that you put inside your Component tags. A use case can be...

Let's said you want to create a DataTable component, on the DataTable component you create all your table html markup, style and javascript. So to use the component i just need to pass a dataset, where this dataset is an array of objects.

How you display each one of those items and in which order? You don't know, because when you created the component you din't have the data and you what to use this component for different type of objects.

So instead of creating complex configuration for the component you just expose each object (item) of the dataset to the parent. So here you will use a slot, so future developers and you can said how the markup of a row will be, and with the expose item you have the data of your dataset that you pass to your component available.

So svelte documentation saids:

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.

Continuing the documentation after the previous line it saids:

The usual shorthand rules apply — let:item is equivalent to let:item={item}, and <slot {item}> is equivalent to <slot item={item}>.

This means that to expose a property from the slot child to the parent you need to do:

<slot {item} /> or <slot item={item}></slot>

And to use that property on the parent you need to do:

let:item or let:item={item}

Check the svelte example on this part of the documentation for better understading. If you don't do that, the item on the parent will be undefined. Thus not having access to the data you which.

On the other hand... Binding

In a nutshell, the purpose of this is to update the variable programmatically or when the DOM element/components updates it. So if you have an input that his value is bind to a variable X when the input change it will change the value of the variable X but also if you change the value of X programmatically it will also change on the input and any place you reference the variable X.

From svelte tutorials we can bind to components properties too:

Just as you can bind to properties of DOM elements, you can bind to component props.

But to components props, and to create a prop you need to use the export keyword. More on component bidings.

The extended explanation is in case you miss something and for future devs that find this issue, have a better understanding of slot and binding, and more if they're beginners to Svelte.

From your REPL I edit it a little, maybe this was what you were trying to do.. It binds to the components and also expose the value to which it binds. Making it posible to update the given value from inside the component but also from outside the component while also exposing the value from the slot to the parent.

Or, are you asking for the functionality that one can specified future bidings to the slot?

[trenta3]

Thank you very much for the explanation: I though I knew slots but I didn't.
Now that I got a clearer picture, I still don't understand why that error message (cannot bind to variable declared with let:) is there, in the sense that for me it would make a lot of sense to both bind (which connects bidirectionally the App#item variable with the Component#item variable) and also let (which connects the slot#item variable with the Component#item variable, allowing data to flow from slot to Component, and thus to the top-level App via the bind syntax.

I have seen your example and it works, but I think that this , having multiple objects that I would like my internal template to bind to.
I think this problem cannot be solved, as of now, in svelte.

I definitely think that I'm asking for future bindings to the slot, if that means to bidirectionally bind the slot#item variable to the Component#item variable.
I also add an image to better explain my understanding of the current situation:

[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?

[Stazer]

I would love to see this features as well, since it makes component composition and reuse a lot easier.

[marcusnewton]

I also wanted to use this in a way to provide a context for child components, where the parent component contains a bunch of boilerplate that the child components shouldn't have to worry about, and the parent provides two-way bindable variables that children can take as props.

Slots seem like these magical things that easily break when you play around with them too aggressively, I guess the benefits of a compiler don't matter when Svelte treats slots as though literally anything might fill them.

[kjmph]

I happened upon this issue while investigating a slightly different usage. May I ask why it isn't possible to do the following. Am I misunderstanding the question? I get that the let:item directive is a nice shorthand, yet isn't this still possible?

<!-- App.svelte -->

<script>
	import Component from './Component.svelte';
	
	let item = 'hello, world';
</script>

<Component {item}>
	<p>
		Inside the item is {JSON.stringify(item)}
	</p>
	
	<input type="text" name="name" bind:value={item} />
</Component>

<!-- Component.svelte -->

<script>
	export let item;
</script>

<p>
	Outside the item is {JSON.stringify(item)}
</p>

<slot />

[marcusnewton]

@kjmph Seems to be working in the REPL: https://svelte.dev/repl/72d0ab2799a04343bc8054176ee4208d?version=3.25.0

[kjmph]

Thanks for placing it in the REPL. It seems that the let:item directive doesn't work, yet using it verbosely works? Unless I misunderstand the issue.

[marcusnewton]

@kjmph Well that won't work since you can't redeclare item, but you can do this: https://svelte.dev/repl/0133298870654061a2fb8ed5b8a8f65e?version=3.25.0

[kjmph]

Ahah, I think you showed the problem. If we change Component.svelte to:

<script>
	export let item;
</script>

<p>
	Outside the item is {JSON.stringify(item)}
</p>

<slot foo={item+"nana"} />

Then the output is:

Instead, if we really want two way mutation between parent and child, then it is best to represent it like this:

<!-- App.svelte -->

<script>
	import {item} from './stores.js';
	import Component from "./Component.svelte";
	$item = 'hello, worl';
</script>

<Component>
	<p>
		Inside the item is {JSON.stringify($item)}
	</p>
	
	<input type="text" name="name" bind:value={$item} />
</Component>

<!-- Component.svelte -->

<script>
	import {item} from './stores.js';
	$: $item = $item.replace('world', 'cow');
</script>

<p>
	Outside the item is {JSON.stringify($item)}
</p>

<slot />

// stores.js

import {writable} from 'svelte/store';

export const item = writable('hello, world');

Just type the letter d in the input box, and watch the input value change.

[kjmph]

This question subtly brought up a few points about Svelte I didn't understand. Which is why I have commented and looked into it at a greater depth. @trenta3, your link to show the problem results in a Non-Image content-type returned response; so it is hard to figure out what the issue is. I realize two things, using stores is a bit boilerplate. So, it seems people want to do things like this:

<!-- App.svelte -->

<script>
  import Component from "./Component.svelte";
  let items = ["foo", "bar", "mung"];
</script>

{#each items as item}
  <Component bind:item>
    <p>
      Inside the item is {JSON.stringify(item)}
    </p>

    <input type="text" name="name" bind:value={item} />
  </Component>
{/each}

<!-- Component.svelte -->

<script>
  export let item;
</script>

<p>
  Outside the item is {JSON.stringify(item)}
</p>

<slot {item} />

As well, people also want to have references go back to the component. However, at the time the component is mounted, the slot isn't mounted. So, there would have to be a callback to the component when the slot is mounted. Something like this:

<!-- App.svelte -->

<script>
  import Component from "./Component.svelte";
  import { onMount } from "svelte";

  let input;
  let comp;

  onMount(() => {
      comp.onSlotMount(input);
  });
</script>

<Component bind:input bind:this={comp}>
  <input bind:this={input} />
</Component>

<!-- Component.svelte -->

<script>
  export let input = undefined;

  export function onSlotMount(input) {
      input.value = 'insert value';
  }
</script>

<slot {input} />

It all has to do with how binding works. It is very non-intuitive, yet makes sense once grokked.

[trenta3]

@kjmph I can see my image correctly when visualizing it in GitHub: https://user-images.githubusercontent.com/10828817/71427308-93471000-26b7-11ea-84fd-b5b1a970fd5a.png
Concerning all the updates, I didn't have time to read them yet because of quite busy days.
I will come back to it though in a few days.