fix: ensure custom elements do not sync flush on mount (#12787)

* fix: ensure Svelte4Components do not sync flush

* fix: ensure Svelte4Components do not sync flush

* lint

* feedback

* simplify test, remove redundant comments

* prettier

* fix test

---------

Co-authored-by: Rich Harris <[email protected]>

Author: trueadm

.changeset/cool-turtles-travel.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure custom elements do not sync flush on mount

packages/svelte/src/legacy/legacy-client.js

@@ -110,7 +110,10 @@ class Svelte4Component {
 			recover: options.recover
 		});
 
-		flush_sync();
+		// We don't flush_sync for custom element wrappers
+		if (!options?.props?.$$host) {
+			flush_sync();
+		}
 
 		this.#events = props.$$events;
 

packages/svelte/tests/runtime-browser/custom-elements-samples/effect-sequence/_config.js

@@ -0,0 +1,20 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		let changed = false;
+
+		target.innerHTML = '<child-element></child-element>';
+
+		await tick(); // wait for element to upgrade
+
+		target.addEventListener('change', () => {
+			changed = true;
+		});
+
+		await tick(); // wait for effect
+
+		assert.equal(changed, true);
+	}
+});

packages/svelte/tests/runtime-browser/custom-elements-samples/effect-sequence/main.svelte

@@ -0,0 +1,7 @@
+<svelte:options customElement="child-element" />
+
+<script>
+	$effect(() => {
+		$host().dispatchEvent(new CustomEvent('change', { bubbles: true }));
+	});
+</script>

packages/svelte/tests/runtime-browser/custom-elements-samples/escaped-css/_config.js

@@ -5,6 +5,7 @@ export default test({
 	async test({ assert, target }) {
 		target.innerHTML = '<custom-element></custom-element>';
 		await tick();
+		await tick();
 		/** @type {any} */
 		const ce = target.querySelector('custom-element');
 		const icon = ce.shadowRoot.querySelector('.icon');