0<script> let btn; function focusBtn() { btn.focus(); } </script> <button bind:this={btn}>Click me</button> <button on:click={focusBtn}>Focus the button above</button>
| Step | Action | Variable 'btn' Value | Effect on DOM | Output/Result |
|---|---|---|---|---|
| 1 | Render first <button> with bind:this={btn} | btn = <button> element | Button element created and assigned | btn now references the first button |
| 2 | Render second <button> with on:click={focusBtn} | btn unchanged | Second button created | Second button ready to click |
| 3 | User clicks second button | btn unchanged | focusBtn() called | btn.focus() sets focus on first button |
| 4 | Focus moves to first button | btn unchanged | First button visually focused | User sees focus highlight on first button |
| 5 | No further changes | btn unchanged | DOM stable | Execution ends |
| Variable | Start | After Step 1 | After Step 2 | After Step 3 | Final |
|---|---|---|---|---|---|
| btn | undefined | <button> element | <button> element | <button> element | <button> element |
bind:this lets you save a reference to a DOM element in a variable.
Use it by adding bind:this={variable} on an element.
The variable holds the actual element after render.
You can call methods like focus() on it.
Useful for direct DOM access without query selectors.bind:this do in a Svelte component?bind:thisbind:this is used to get a direct reference to an HTML element inside a Svelte component.bind:this links a variable to the actual DOM element, allowing direct manipulation.bind:this = direct element reference [OK]bind:this links variable to element itself [OK]bind:this with binding to state variablesmyButton to a button element using bind:this in Svelte?bind:this requires curly braces around the variable name: bind:this={variable}.<button bind:this={myButton}>Click me</button> uses correct syntax with curly braces. Options A, B, and C use incorrect or invalid syntax.bind:this [OK]bind:this [OK] <script>
let inputRef;
function focusInput() {
inputRef.focus();
}
</script>
<input bind:this={inputRef} placeholder="Type here"/>
<button on:click={focusInput}>Focus Input</button>bind:this usageinputRef variable is bound to the input element, so it holds the actual input DOM element.focusInput functioninputRef.focus() calls the native focus method on the input element, placing the cursor inside it.bind:this gives element to call focus() [OK]bind:this gives element to call methods on [OK]inputRef is undefinedfocus() is invalid <script>
let box;
</script>
<div bind:this=box>Content</div>
<button on:click={() => console.log(box)}>Log Box</button>bind:this syntaxbind:this must be inside curly braces: bind:this={box}.div is valid, box can be let, and the event handler syntax is correct.bind:this syntax is missing curly braces around box. -> Option Dbind:this [OK]bind:this [OK]bind:thisbind:this can't be used on divdiv element after it renders in Svelte. Which approach correctly uses bind:this and lifecycle to get the width?box element is only available after the component mounts, so measuring width must happen inside onMount.<script>
import { onMount } from 'svelte';
let box;
let width = 0;
onMount(() => {
width = box.clientWidth;
});
</script>
<div bind:this={box}>Content</div>
<p>Width: {width}px</p> uses onMount to safely access box.clientWidth. Options B and C try to access width before box is set, causing errors. <script>
import { beforeUpdate } from 'svelte';
let box;
let width = 0;
beforeUpdate(() => {
width = box.clientWidth;
});
</script>
<div bind:this={box}>Content</div>
<p>Width: {width}px</p> uses beforeUpdate, which runs before DOM updates, so box may not be ready.bind:this with onMount to measure width. -> Option ConMount after binding [OK]onMount to access element size after render [OK]beforeUpdate instead of onMountbind:this to get element referencePass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.