Document dynamic bind:this

[Conduitry]

As far as I can tell, there are no docs or examples yet where bind:this is given a dynamic expression depending on e.g. each block iteration. This should be mentioned somewhere, as pre-v3 this was one of the things that kept coming up that people wanted with refs.

[CanRau]

By dynamic you mean something like

let reference = null
<div
bind:this={condition ? reference : null} />

or like

let reference = []
<div
bind:this={reference[index]} />

like mentioned in #2333 ?

I'd love to get the first one running 😍 Any possibility?
Or any other way to avoid document.querySelector to get the one selected element?

Update: Sadly the following doesn't work either even though it's at least compiling

<div {...index === item ? { 'bind:this': selectedItem } : {}}>

[Conduitry]

I mean the second one - I don't know what you'd want the first one would do. If you bound to reference and then had a reactive assignment $: reference2 = condition ? reference : null, then reference2 would be either the DOM node or null depending on the value of condition. Is that what you mean?

The third other syntax in your update compiles because Svelte doesn't see that as a conditional bind:this, but as an attribute called bind:this that is conditionally applied. All directives need to be visible at compile time.

[CanRau]

Yea just that the condition has to happen in the {#each} loop I guess 🤔

The third other syntax in your update compiles because Svelte doesn't see that as a conditional bind:this, but as an attribute called bind:this that is conditionally applied. All directives need to be visible at compile time.

That's what I thought might be the case, thanks for clarifying 🙏

So sticking to document.querySelector for now..

[dummdidumm]

Closing due to no activity and no plans to do so, as I think the behavior is intuitive. This was mostly a "oh I can do this now?" for Svelte 2 users I guess.