Cannot reassign or bind to snippet parameter.

[leandergangso]

Hey, I have a component that accepts a snippet. I want to be able to bind:this to whatever is inside this snippet.

// --- Component.svelte
<script lang="ts">
     interface Props {
           trigger: Snippet<[{ refElem: HTMLElement }]>
     }
     let { trigger }: Props = $props()
     let ref: HTMLElement

    onMount(() => {
        ref.addEventListener(...)
        return () => ref.removeEventListener(...)
    })
</script>

{@render trigger({ refElem: ref })}

// --- +page.svelte
<Component>
    {#snippet trigger({ refElem })
         <button bind:this={refElem}>my btn</button>
    {/snippet}
</Component/>

see playground

I read somewhere that we can bind to object properties, but not directly.
Either way I can't seem to get this to work.
Any help is appreciated. :)

[brunnerh]

You cannot bind to destructured primitive arguments and you have to pass in a state object that you can reference, so one of its properties can be bound. E.g.

<!-- Component -->
<script lang="ts">
	import { onMount } from 'svelte'
	interface Props {
		trigger: Snippet<[{ refElem: HTMLElement }]>
	}
	let { trigger }: Props = $props()
	let obj = $state({ ref: null });
	onMount(() => {
		console.log(obj.ref ? "ok" :"no")
	})
</script>

{@render trigger(obj)}

<!-- App.svelte -->
<script lang="ts">
	import Component from './Component.svelte'
</script>

<Component>
	{#snippet trigger(obj)}
		<button bind:this={obj.ref}>my btn</button>
	{/snippet}
</Component>

REPL

[leandergangso]

ahh ok, thanks for the quick update.

[xreider]

The only working solution that does not throw an error. Note that a function is passed that assigns a node
https://svelte.dev/playground/f2129e9f3e1d4910a0112e9c6fa47441?version=5.8.0