bind:this on <img> element doesn't trigger reactivity

[IcyFoxe]

Describe the bug

When using bind:this on an image element, there's no way to use Svelte's native reactivity for that element.
Neither $derived, $derived.by or $effect does work.

Only option is to use a workaround techniques, like using the onload event listener.

Expected behavior

Once the image loads, trigger Svelte reactivity.

---

Edit:
After playing some more with this, bind:contentRect also isn't reactive as it should be. When I start scaling an element (for example the said image), the bound state value of this element doesn't change. I again have to track the change based on something else, for example the function that scaled the image, and get the getBoundingClientRect() value manually.

Also, documentation still shows the legacy mode example:
https://svelte.dev/docs/svelte/bind#bind:this

Instead of let canvas = $state(); it uses let canvas;.

---

Reproduction

Playground link (Important: make sure you have cache disabled)

System Info

Windows 10, Chrome

Severity

annoyance

[dummdidumm]

The $derived playground works as expected. When img is mounted, its image isn't loaded yet so size is 0. bind:this does not update when any of the properties of its element change.

For the bind:contentRect please provide a playground link, I'm not sure what you mean.

[IcyFoxe]

@dummdidumm Is there any reason why you wouldn't want bind:this to update when an image loads? To me at least it makes no sense. Makes working with images much more cumbersome than it should be.

[brunnerh]

It would be inconsistent, bind:this works the same for all elements, it just gets the instance.

[IcyFoxe]

Here's the example for bind:contentRect not working: LINK

[7nik]

It works correctly according to the ResizeObserver specs.

• Observations do not fire for non-replaced inline Elements.
• Observations will not be triggered by CSS transforms.

[IcyFoxe]

Ok guys, in all honesty, should I just use pure JavaScript then? What's the purpose of bind:contentRect? I thought the whole point of Svelte was to simplify your workflow, not to do everything yourself.

[7nik]

The problem is that bind:contentRect uses ResizeObserver under the hood and, for some mysterious reason (my only guess is performance), the web became sh*t again. So you cannot use ReseizeObserver as well, and your options are:

• change the size without CSS transformations;
• manually get the rect when you change scale/whatever or by timer;
• use a hack from pre-ResizeObserver time, like this one.

[IcyFoxe]

Hmm, I see. Thanks for explanation.
Well, if everything works as intended, then I have nothing more to add.

I was however surprised by the behavior of bind:this and bind:contentRect, and without your explanation, I would assume these things were a bug.

[dummdidumm]

Closing since this works as designed, even if unfortunate in the case of bind:contentRect