From 7ffa5f49b070ebecfaf68b86bd848000458f82b4 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Wed, 19 Jul 2023 15:29:08 +0200 Subject: [PATCH] fix: wait a longer tick before checking slots It seems that browser resolve "await Promise.resolve()" extra fast (close to synchronous) so the DOM isn't actually updated further. This fixes an issue where web component slots don't appear when the script registering the web components is invoked before them being added to the DOM fixes #8997 --- .changeset/tiny-walls-brake.md | 5 +++++ packages/svelte/src/runtime/internal/Component.js | 5 +++-- 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 .changeset/tiny-walls-brake.md diff --git a/.changeset/tiny-walls-brake.md b/.changeset/tiny-walls-brake.md new file mode 100644 index 0000000000..6813504bdd --- /dev/null +++ b/.changeset/tiny-walls-brake.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: wait a longer tick before checking slots diff --git a/packages/svelte/src/runtime/internal/Component.js b/packages/svelte/src/runtime/internal/Component.js index bc5b117c2f..f977eb48bc 100644 --- a/packages/svelte/src/runtime/internal/Component.js +++ b/packages/svelte/src/runtime/internal/Component.js @@ -215,7 +215,7 @@ if (typeof HTMLElement === 'function') { this.$$cn = true; if (!this.$$c) { // We wait one tick to let possible child slot elements be created/mounted - await Promise.resolve(); + await new Promise((f) => setTimeout(f)); // don't do Promise.resolve() as that fires too soon if (!this.$$cn) { return; } @@ -316,7 +316,8 @@ if (typeof HTMLElement === 'function') { disconnectedCallback() { this.$$cn = false; // In a microtask, because this could be a move within the DOM - Promise.resolve().then(() => { + // don't do Promise.resolve() as that fires too soon + new Promise((f) => setTimeout(f)).then(() => { if (!this.$$cn) { this.$$c.$destroy(); this.$$c = undefined;