Svelte 5: Portal action "Move to body" finding first "PortalTarget" (might only be a docs issue)

[techniq]

While investigating sveltejs/svelte#12427 (comment) I noticed in Svelte 5 the "Move to body" basic example does not move to the body but instead finds the first .PortalTarget in the DOM via document.querySelector('.PortalTarget').

Svelte 4

CleanShot.2024-07-14.at.14.48.43.mp4

Svelte 5

CleanShot.2024-07-14.at.14.48.13.mp4

This was surprising, but more to why Svelte 4 doesn't see the subsequent .PortalTarget elements until I added a debugger right after the document.querySelector call and then it became clear.

Svelte 4	Svelte 5

What's even more surprising is I wasn't able to replicate this timing in a Svelte 4 REPL (thus far).

I feel like the Svelte 5 approach works as you would intend, but will be require a change to the docs to set an explicit document.body fallback since the page includes a lot of .PortalTarget examples.

This also did not highlight the main issue of removing subsequent DOM elements. I thought the destroy's removeChild(...) was maybe removing the wrong node but even commenting out the call still destroys the wrong elements.