you can also replicate the bind:this syntax if you please: Wrapper.svelte <script> let root export { root as this } </script> <div bind:this={root} />
This lets the caller use it like this:
<Wrapper bind:this={root} />
in the same way we can already do this with elements:
<div bind:this=
Especially when coming from a framework like React, it might feel very tempting to start creating a component wrapper around the input (i.e. <input> becomes <Input/>) and add your custom event handlers in there.This is a great approach in React, but not so much in Svelte. Why, you ask?Well, Svelte (at least in its current form, v3) really shines when you have native DOM elements at your disposal. You can use transition directives, conditionally switch CSS classes, bind to the current value with ease, and more.