Element reference bindings (bind:this) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when using bind:this in Svelte?

Consider this Svelte snippet:

<script>
  let inputRef;
</script>

<input bind:this={inputRef} />

<button on:click={() => inputRef.focus()}>Focus Input</button>

What is the behavior when the button is clicked?

Svelte

<script>
  let inputRef;
</script>

<input bind:this={inputRef} />

<button on:click={() => inputRef.focus()}>Focus Input</button>

A The button itself receives focus instead of the input.

B Nothing happens because <code>inputRef</code> is undefined.

C An error occurs because <code>bind:this</code> cannot be used on input elements.

D The input element receives focus when the button is clicked.

💡 Hint

Remember that bind:this assigns the actual DOM element to the variable.

The bind:this directive in Svelte assigns the actual DOM element to the variable inputRef. When the button is clicked, the inputRef.focus() method is called, which focuses the input element.

❓ state_output

intermediate

What is the value of the variable after mount with bind:this?

Given this Svelte code:

<script>
  import { onMount } from 'svelte';
  let divRef;
  let text = '';

  onMount(() => {
    text = divRef ? 'Element exists' : 'No element';
  });
</script>

<div bind:this={divRef}>Hello</div>
<p>{text}</p>

What will be displayed inside the <p> tag after the component mounts?

Svelte

<script>
  import { onMount } from 'svelte';
  let divRef;
  let text = '';

  onMount(() => {
    text = divRef ? 'Element exists' : 'No element';
  });
</script>

<div bind:this={divRef}>Hello</div>
<p>{text}</p>

A Element exists

B No element

C An empty string

D Undefined

💡 Hint

Think about when onMount runs and if divRef is assigned by then.

The bind:this directive assigns the DOM element to divRef before onMount runs. Therefore, divRef is truthy and text becomes 'Element exists'.

📝 Syntax

advanced

Which option correctly uses bind:this to reference a component's DOM element?

You want to get a reference to a <section> element in your Svelte component. Which code snippet is correct?

A <section bind:this=sectionRef></section>

B <section bind:this={sectionRef}></section>

C <section bind:this="sectionRef"></section>

D <section bind:this={sectionRef}></section> with <code>let sectionRef = null;</code> missing

💡 Hint

Check the syntax for binding variables in Svelte directives.

Option B correctly uses curly braces to bind the variable sectionRef to the element. Option B misses curly braces, C uses quotes incorrectly, and D is incomplete because the variable declaration is missing.

🔧 Debug

advanced

Why does this bind:this example cause an error?

Examine this Svelte code:

<script>
  let btnRef;
</script>

<button bind:this={btnRef} on:click={() => btnRef = null}>Click</button>

What error or problem will occur when clicking the button?

Svelte

<script>
  let btnRef;
</script>

<button bind:this={btnRef} on:click={() => btnRef = null}>Click</button>

A After clicking, <code>btnRef</code> becomes null, so future references cause errors.

B No error; <code>btnRef</code> is correctly set to null and re-assigned automatically.

C SyntaxError because <code>btnRef</code> cannot be assigned inside event handler.

D The button disappears from the DOM after clicking.

💡 Hint

Think about what happens when you overwrite the reference variable manually.

Manually setting btnRef to null breaks the binding. The variable no longer points to the button element, so calling methods on it later will cause errors.

🧠 Conceptual

expert

How does bind:this interact with component lifecycle and reactivity?

In Svelte, when you use bind:this to get a reference to a DOM element, which statement is true about its lifecycle and reactivity?

A The variable bound with <code>bind:this</code> updates immediately when the element is created and is reactive to DOM changes.

B The variable is assigned only once after the component mounts and does not update if the element is replaced.

C The variable is reactive and updates automatically even if the element is removed and recreated in the DOM.

D The variable is assigned after the component is destroyed.

💡 Hint

Consider what happens if the element with bind:this is conditionally rendered or replaced.

The bind:this directive assigns the DOM element to the variable when the element is created. If the element is removed and recreated, the variable updates accordingly. It is not reactive in the sense of Svelte's reactive statements ($: ) but updates when the element changes in the DOM lifecycle.