Router should ignore clicks from outside the app container

[Rich-Harris]

Describe the problem

I had a follow-up thought about #6914. In cases where people are using SvelteKit to generate embeds that sit in a larger application, it's necessary to come up with elaborate workarounds to prevent clicks in the main app nav (for example) being handled by SvelteKit's router.

If we instead only listened for click events coming from inside the part of the app SvelteKit controls, it would be very easy to embed SvelteKit apps elsewhere.

Describe the proposed solution

I'm pretty sure we would just need to replace

kit/packages/kit/src/runtime/client/client.js

Line 1393 in 93712f0

addEventListener('click', (event) => {

and other calls to addEventListener(...) with target.addEventListener(...).

The only downside I can see is that links inside src/app.html outside %sveltekit.body% wouldn't trigger the client-side router, but a) you can work around it if you really need to with goto, and b) i would be astonished if anyone was doing that. Technically a breaking change, of course, so we should do this quickly if we intend to do it at all.

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[alexbjorlig]

After some time debugging, I found that this change actually broke something I guess is pretty common in "real" apps. When using a framework to build interactive tooltips like popper, we started to see weird behavior.

We are trying to fix this, by making sure popper attaches "inside" the app, instead of doing document.body.appendChild(.... Mostly leaving it here, if other people should encounter a similar issue 😎