How to Use bind:this in Svelte: Syntax and Examples

In Svelte, use bind:this to get a reference to a DOM element or component instance by binding it to a variable. This allows you to directly access or manipulate the element or call component methods in your script.

Syntax

The bind:this directive assigns the DOM element or component instance to a variable in your script. This variable can then be used to access properties or methods directly.

• bind:this={variable}: Binds the element or component to variable.
• variable: A script variable that will hold the reference.

svelte

<input bind:this={inputElement} placeholder="Type here" />

<script>
  let inputElement;
</script>

Output

An input box appears where you can type text.

Example

This example shows how to focus an input element using bind:this. When you click the button, the input box gets focused programmatically.

svelte

<script>
  let inputRef;

  function focusInput() {
    inputRef.focus();
  }
</script>

<input bind:this={inputRef} placeholder="Click the button to focus me" />
<button on:click={focusInput}>Focus Input</button>

Output

An input box and a button labeled 'Focus Input'. Clicking the button puts the cursor inside the input box.

Common Pitfalls

Common mistakes when using bind:this include:

• Trying to use the bound variable before the element is mounted, which results in undefined.
• Binding to a variable but not initializing or checking if it exists before calling methods.
• Confusing bind:this with event binding or two-way data binding.

Always ensure the element is rendered before accessing the variable.

svelte

<script>
  let btnRef;

  // Wrong: calling method before element exists
  // btnRef.focus(); // This will cause an error

  function clickButton() {
    btnRef.click(); // Safe to call after mount
  }
</script>

<button bind:this={btnRef}>Click me</button>
<button on:click={clickButton}>Trigger Click</button>

Output

Two buttons: 'Click me' and 'Trigger Click'. Clicking 'Trigger Click' programmatically clicks the 'Click me' button.

Quick Reference

• Purpose: Get direct access to DOM elements or component instances.
• Usage: bind:this={variable} inside element or component tag.
• Access: Use the variable in script to call methods or read properties.
• Timing: Variable is set after the element/component is mounted.

Key Takeaways

Use bind:this to get a reference to a DOM element or component instance in Svelte.

The bound variable is only available after the element or component is mounted.

You can call methods or access properties directly on the bound variable.

Avoid accessing the bound variable before the component is rendered to prevent errors.

This technique is useful for focusing inputs, calling component methods, or manipulating DOM elements.