Crash `node is null` when using extension like ProtonPass

[matubu]

Describe the bug

Extension like ProtonPass sometimes add controls in the DOM when you focus inputs

If ProtonPass insert an element before the page is fully loaded / before hydration took over. Svelte 5 crash

proton-svelte-crash.webm

Is their a way to prevent this crash ?

Related: #14761

Reproduction

1. Install ProtonPass
2. Create a Svelte +page.svelte, with the following code:

<form>
	<input type="email" name="email" />
	{#if false}Hello World{/if}
</form>

3. Refresh/Load the page
4. Focus the input before the page is fully loaded (the slower the load time, the more likely is it to be at the right timing)

Logs

Uncaught (in promise) TypeError: node is null              hydration.js:90:6

  in +page.svelte
  in layout.svelte
  in root.svelte
    remove_nodes hydration.js:90
    update_branch if.js:60
    if_block if.js:104
    update_reaction runtime.js:401
    update_effect runtime.js:527
    create_effect effects.js:125
    block effects.js:362
    if_block if.js:100
    _page +page.svelte:26
    effect2 hmr.js:47

System Info

System:
    Container: Yes
  Binaries:
    Node: 22.12.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.9.0 - /usr/local/bin/npm
  Browsers:
    Firefox: 133.0.3
    ProtonPass: 1.26.0
  npmPackages:
    svelte: 5.16.4 => 5.16.4

Severity

blocking all usage of svelte

[trueadm]

ProtonPass shouldn't be mutating the content of the page like this, this is prone to be break for almost any framework that has hydration because this will result in a mismatch. They should be doing what other extensions do instead – and that's to add elements to the document body and to absolutely position them next to the input – which is far less invasive.

[matubu]

I understand that what Protonpass is doing is pretty risky with modern frameworks, and it would be better if Protonpass and every extension were not doing this kind of DOM mutation. But I think many extensions do similar stuff. Wouldn't it be possible to step over unrecognized DOM elements (those not created by Svelte) to handle most basic DOM additions and avoid crashing?

[trueadm]

@matubu It's simply not possible to do that – the framework can't just skip elements and keep checking others, that would mean we'd have to tell the runtime about each node and what to find – especially in Svelte 5 where we don't create each node, but rather templates.

This is an old age problem that Google Translate also suffers: https://issues.chromium.org/issues/41407169

Some possible ideas for the future: https://bsky.app/profile/sebmarkbage.calyptus.eu/post/3lffovcxuzc2q