Check Svelte component instance is detached or not from the document after a microtask tick. (original) (raw)

Describe the bug

Currently we dealing with incorporating of Svelte component in out big application and at this point I've noticed that Svelte mount several components under shadow dom.
Looking at this issue with duplicate mounts I've tracked to

async connectedCallback() {
  this.$$cn = true;
  if (!this.$$c) {
    // We wait one tick to let possible child slot elements be created/mounted
    await 0;
    if (!this.$$cn) {
      return;
    }
....

here we check this.$$cn and this.$$c but after a tick we refer to this.$$cn only

I've slightly modified this part to recheck both this.$$c and this.$$cn after a tick like this

async connectedCallback() {
  this.$$cn = true;
  if (!this.$$c) {
    // We wait one tick to let possible child slot elements be created/mounted
    await 0;
    if (!this.$$cn || this.$$c) {
      return;
    }

and not I don't see any duplicate components.

My strong believe is that we should check both this.$$c and this.$$cn after a tick and seems like we have an issue here?

Reproduction

no exact steps.
Issue is observable with complex application where we have triggered many mounts/unmounts of the component

Logs

No response

System Info

System: OS: macOS 14.3 CPU: (8) arm64 Apple M1 Memory: 59.86 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.17.1 - /usr/local/bin/node Yarn: 3.6.1 - /opt/homebrew/bin/yarn npm: 9.6.7 - /usr/local/bin/npm npmPackages: rollup: 2.78.0 => 2.78.0 svelte: 4.2.8 => 4.2.8

Severity

annoyance