Referencing DOM Elements with bind:this

Snippet

Referencing DOM Elements with bind:this

While Svelte is declarative, sometimes you need direct access to a DOM element (e.g., for Canvas or third-party libraries). The bind:this directive assigns the rendered element to a variable.

snippet.js
javascript
<script>
  let canvas;
 
  function init() {
    const ctx = canvas.getContext('2d');
    ctx.fillRect(0, 0, 50, 50);
  }
</script>
 
<canvas bind:this={canvas}></canvas>

svelte

Breakdown

let canvas;

Declares a variable that will hold the reference to the DOM element.

bind:this={canvas}

Tells Svelte to set the 'canvas' variable to this specific DOM element after it is created.

canvas.getContext('2d')

Directly calls standard browser APIs on the referenced element.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Referencing DOM Elements with bind:this

Related