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
ce-tick
Simon Holthausen 1 year ago
parent 657f11376c
commit 7ffa5f49b0

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: wait a longer tick before checking slots

@ -215,7 +215,7 @@ if (typeof HTMLElement === 'function') {
this.$$cn = true; this.$$cn = true;
if (!this.$$c) { if (!this.$$c) {
// We wait one tick to let possible child slot elements be created/mounted // 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) { if (!this.$$cn) {
return; return;
} }
@ -316,7 +316,8 @@ if (typeof HTMLElement === 'function') {
disconnectedCallback() { disconnectedCallback() {
this.$$cn = false; this.$$cn = false;
// In a microtask, because this could be a move within the DOM // 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) { if (!this.$$cn) {
this.$$c.$destroy(); this.$$c.$destroy();
this.$$c = undefined; this.$$c = undefined;

Loading…
Cancel
Save