create effect root for custom element (#13312)

packages/svelte/src/internal/client/dom/elements/custom-element.js

@@ -1,5 +1,5 @@
 import { createClassComponent } from '../../../../legacy/legacy-client.js';
-import { destroy_effect, render_effect } from '../../reactivity/effects.js';
+import { destroy_effect, effect_root, render_effect } from '../../reactivity/effects.js';
 import { append } from '../template.js';
 import { define_property, get_descriptor, object_keys } from '../../../shared/utils.js';
 
@@ -145,7 +145,8 @@ if (typeof HTMLElement === 'function') {
 				});
 
 				// Reflect component props as attributes
-				this.$$me = render_effect(() => {
+				this.$$me = effect_root(() => {
+					render_effect(() => {
 						this.$$r = true;
 						for (const key of object_keys(this.$$c)) {
 							if (!this.$$p_d[key]?.reflect) continue;
@@ -164,6 +165,7 @@ if (typeof HTMLElement === 'function') {
 						}
 						this.$$r = false;
 					});
+				});
 
 				for (const type in this.$$l) {
 					for (const listener of this.$$l[type]) {
@@ -196,7 +198,7 @@ if (typeof HTMLElement === 'function') {
 			Promise.resolve().then(() => {
 				if (!this.$$cn && this.$$c) {
 					this.$$c.$destroy();
-					destroy_effect(this.$$me);
+					this.$$me();
 					this.$$c = undefined;
 				}
 			});

packages/svelte/src/internal/client/runtime.js

@@ -516,17 +516,12 @@ function flush_queued_root_effects(root_effects) {
 				effect.f ^= EFFECT_QUEUED;
 			}
 
-			// When working with custom elements, the root effects might not have a root
-			if (effect.first === null && (effect.f & BRANCH_EFFECT) === 0) {
-				flush_queued_effects([effect]);
-			} else {
 			/** @type {Effect[]} */
 			var collected_effects = [];
 
 			process_effects(effect, collected_effects);
 			flush_queued_effects(collected_effects);
 		}
-		}
 	} finally {
 		is_flushing_effect = previously_flushing_effect;
 	}