Expecting a way to hydrate on:error when it's part of <video><source>

[imsys]

Describe the bug

I would expect a way to hydrate on:error when it's part of <video><picture><source> elements, those seems to be run by the browser much earlier than svelte could inject listening events to it.

<video autoplay muted loop>
    <source src="assets/img/ship.webm" type='video/webm; codecs="vp9"' on:error={fallbackFn} />
</video>

I need to use it as a fallback. I'm using a transparent animated video using webm/VP9, but Safari doesn't support it, so I'm going to make it fallback to animated images.

The workaround I found is to just manually add all JS to the onerror tag:

<video autoplay muted loop>
    <source src="assets/img/ship.webm" type='video/webm; codecs="vp9"'
onerror="parentNode.parentElement.innerHTML = '<picture><source srcset=\'assets/img/ship.webp\' type=\'image/webp\'><source srcset=\'assets/img/ship.apng\' type=\'image/apng\'><img src=\'assets/img/ship.gif\' alt=\'ship\'></picture>';" />
</video>

onerror at <video> elements is specified at: https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

I think this is similar or related to #1390

Reproduction

https://github.com/imsys/sveltekit-onerror-test

Logs

No response

System Info

System:
    OS: Linux 5.4 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 571.92 MB / 15.37 GB
    Container: Yes
    Shell: 5.1.12 - /bin/bash
  Binaries:
    Node: 17.3.1 - ~/.nvm/versions/node/v17.3.1/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v17.3.1/bin/npm
  Browsers:
    Brave Browser: unknown
    Chromium: 96.0.4664.110
    Firefox: 95.0.2
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.17 
    @sveltejs/adapter-static: next => 1.0.0-next.28 
    @sveltejs/kit: next => 1.0.0-next.266 
    svelte: ^3.46.0 => 3.46.4

Severity

annoyance

Additional Information

No response

[Conduitry]

I don't think adjust the behavior of on:error in specific cases so that it's doing something other than attaching an event handler at the time of hydration is the right way forward here. I would suggest a custom use: action that, upon initialization, checks whether the element has already settled (successfully or unsuccessfully) and attaches an event handler if it has not - and reports the status with a callback either way. This could exist in userland - I don't know whether there is a nice way that works across multiple kinds of elements that would make sense to provide as a utility in Svelte itself or in Kit. I think there is an issue somewhere on the Svelte repo about providing some built-in actions.

[Rich-Harris]

Yeah, there's really nothing Svelte can usefully do here — this is something that would need to be handled by an action or similar.