Support binding to the "complete" property of <img> elements (or even all arbitrary properties of DOM elements)

[shirakaba]

Is your feature request related to a problem? Please describe.

Svelte does not support two-way binding for the complete property on <img> elements, preventing us from easily updating a variable based on an image's loading state.

I am building a Netflix-style carousel of images, where the images are replaced when moving up/down to a new row. I'm tasked with hiding the images altogether (and an independent 'selection box' component) until they're fully loaded, but it's very fiddly to determine which ones have been loaded just by using an array of refs and event listeners.

Describe the solution you'd like

Just as you can bind:

• exported props from Svelte components (component bindings), and;
• the value prop on input elements (text inputs);

... Svelte could add support for bind:complete. It would look like this:

REPL: https://svelte.dev/repl/bf3286a072fb4378bd466b2f161ea0ee?version=3.23.2

In-line:

<script>
  let loadComplete = false;
</script>

<img
  bind:complete={loadComplete}
  src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg"
/>
<p>Image has loaded: {loadComplete}</p>

Describe alternatives you've considered

bind:this={ref} gives you some options for manually checking ref.complete, but as it updates upon the element ref updating, rather than the complete property updating, users currently have to establish on:load event listeners and so it's all quite fiddly (especially when you have an array of images to manage, as you often do).

How important is this feature to you?

It's not a show-stopper (as the above alternative is doable). But for my particular use-case described in the opening section, it would be really handy.

Additional context

It would be worth discussing whether or not it would be sensible to extend this functionality to all arbitrary properties; not just complete. I don't know how Svelte achieves it for the currently-supported value bindings, however; does it have to be implemented bespoke for each property (e.g. by using DOM Level 0 event listeners), or is there some sort of way to observe all arbitrary mutations to a HTML element?

[Conduitry]

Please use the proper issue template for feature requests. This isn't a bug.

[shirakaba]

@Conduitry Now updated as a feature request.

[dimfeld]

Svelte's bind syntax currently uses event listeners to receive updates on DOM elements. e.g. <input bind:value> listens to the input event. I suppose for bind:complete, Svelte could listen to the load event on the img and set it to true. That might get tricky if the src attribute is changed causing the image to reload though, since there would need to be some way to detect that and reread the value of complete.

It's also been suggested that a MutationObserver can be used to listen to changes on arbitrary attributes. I believe this works in simple tests but I don't think any actual work has been done to automate that inside Svelte.