April 9, 2025

How to Bind to a Custom Component in Svelte

Justin Golden

The Problem

When binding a custom Button.svelte component with bind:this={myButton}, your app breaks.

The Solution

Instead of binding directly with bind:this, pass it as a ref.

Button.svelte:

<script>
  let {ref = $bindable()} = $props();
</script>

<button bind:this={ref}></button>

Usage:

<Button bind:ref={myButton}></Button>

That’s it! Hope this short article helped you. Feel free to check out our other articles!