create effect root for custom element (#13312)

Author: Rich-Harris

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,24 +145,26 @@ if (typeof HTMLElement === 'function') {
 				});
 
 				// Reflect component props as attributes
-				this.$$me = render_effect(() => {
-					this.$$r = true;
-					for (const key of object_keys(this.$$c)) {
-						if (!this.$$p_d[key]?.reflect) continue;
-						this.$$d[key] = this.$$c[key];
-						const attribute_value = get_custom_element_value(
-							key,
-							this.$$d[key],
-							this.$$p_d,
-							'toAttribute'
-						);
-						if (attribute_value == null) {
-							this.removeAttribute(this.$$p_d[key].attribute || key);
-						} else {
-							this.setAttribute(this.$$p_d[key].attribute || key, attribute_value);
+				this.$$me = effect_root(() => {
+					render_effect(() => {
+						this.$$r = true;
+						for (const key of object_keys(this.$$c)) {
+							if (!this.$$p_d[key]?.reflect) continue;
+							this.$$d[key] = this.$$c[key];
+							const attribute_value = get_custom_element_value(
+								key,
+								this.$$d[key],
+								this.$$p_d,
+								'toAttribute'
+							);
+							if (attribute_value == null) {
+								this.removeAttribute(this.$$p_d[key].attribute || key);
+							} else {
+								this.setAttribute(this.$$p_d[key].attribute || key, attribute_value);
+							}
 						}
-					}
-					this.$$r = false;
+						this.$$r = false;
+					});
 				});
 
 				for (const type in this.$$l) {
@@ -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,16 +516,11 @@ 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 = [];
+			/** @type {Effect[]} */
+			var collected_effects = [];
 
-				process_effects(effect, collected_effects);
-				flush_queued_effects(collected_effects);
-			}
+			process_effects(effect, collected_effects);
+			flush_queued_effects(collected_effects);
 		}
 	} finally {
 		is_flushing_effect = previously_flushing_effect;