Svelte 5: svelte:element with its `this` set to `input` or `textarea` doesn't call their actions

[HighFunctioningSociopathSH]

Describe the bug

following this issue (#10993), actions also do not work on a svelte:element with its this set to input or textarea.

Reproduction

// +page.svelte

<svelte:options runes />

<script lang="ts">
  function action(node: HTMLInputElement) { 
    console.log('hello');
  }
</script>

<svelte:element this="input" use:action></svelte:element>

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 6.69 GB / 15.63 GB
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 9.7.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.81)
    Internet Explorer: 11.0.22621.1
  Svelte version: ^5.0.0-next.94

Severity

blocking an upgrade

[HighFunctioningSociopathSH]

upon further tries I noticed that the reactivity on the said svelte:elements does not work at all. You can even try to set an id for the element but the id will never update. nothing happens on the client side.

<svelte:options runes />

<script lang="ts">
  let id = $state("something");

  setTimeout(() => {
    id = "something else"
  }, 2000)
</script>

<svelte:element this="input" {id}></svelte:element>

[brunnerh]

Both of those examples work in the REPL for me.
REPL 1 REPL 2

[HighFunctioningSociopathSH]

@brunnerh interesting. but I'm sure that it doesn't work like it should. would you be able to confirm your results on your local machine? Since REPL runs entirely on the client side the results might be different from your own environment. maybe a serverside code causes a crash of some sort?!

And if your results stay the same what could be causing my system to act this way?

[brunnerh]

Looks like an SSR/hydration issue, may also be SvelteKit specific.
Works locally without SSR but breaks with SSR.

Dev and build both seem to give same results.

"@sveltejs/adapter-auto": "^3.2.0",
"@sveltejs/adapter-node": "^5.0.1",
"@sveltejs/kit": "^2.5.5",
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"svelte": "^5.0.0-next.95",

(Btw, stuff like setTimeout should be guarded with something like onMount or if (browser) if you have SSR. Actions only run on the client anyway.)

[HighFunctioningSociopathSH]

(Btw, stuff like setTimeout should be guarded with something like onMount or if (browser) if you have SSR. Actions only run on the client anyway.)

I see. thanks for the tip.

[fcrozatier]

All the void elements are affected by this bug.

See the reproduction here

Strangely it works as intended (not buggy) in the REPL

[fcrozatier]

After experimenting with all html elements, the full list of affected ones is a superset of the void elements:

area base br caption colgroup embed frame frameset head hr img input link meta param source tbody td template textarea tfoot th thead tr track wbr

[Rich-Harris]

closed via #11258