`mount` is automatically coupled to the component that called it

[Serator]

Describe the bug

Based on #15770.

I have 2 tabs, one of which has a popup mounted in document.body. The popup should appear and disappear smoothly. To do this, I use svelte/transition with the |global modifier.

The problem is that when I switch tabs, the tab that has Popup in it (Tab1) is not removed from the DOM until the Popup disappearance animation is over.

I would like to make the Tab2 component unmount and remove from the DOM instantly, and the Popup component smoothly.

Reproduction

https://svelte.dev/playground/e820aac2b926414fb75544feb038bfa6?version=5.27.0

Severity

annoyance

[7nik]

Mount it in a separate tick.

onMount(() => {
  let instance;
  tick().then(() => instance = mount(Popup, {target: document.body}));
  return () => {
    unmount(instance, {outro: true})
  }
})

REPL

[Serator]

@7nik Yep, @brunnerh suggested a similar solution via setTimeout, but it looks like a hack.

Is it an intentional coupling between mount and the component that called it, or is it a bug? Couldn't find any mention of this in the documentation.

[brunnerh]

I was envisioning a potential new mount option to control this behavior, e.g.

mount(Popup, {
  root: true, // <--
  target: document.body,
  ...
});

(Name up for debate.)