From 59a379596c2e61327007b7e428e3f7838f685344 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Sun, 27 Jul 2025 11:28:07 +0200
Subject: [PATCH] fix: `append_styles` in an effect to make them available on
 mount

---
 .changeset/shaggy-comics-fail.md              |  5 +++++
 .../svelte/src/internal/client/dom/css.js     |  4 ++--
 .../host-rune-access-injected-css/_config.js  | 21 +++++++++++++++++++
 .../host-rune-access-injected-css/main.svelte | 16 ++++++++++++++
 4 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/shaggy-comics-fail.md
 create mode 100644 packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/_config.js
 create mode 100644 packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/main.svelte

diff --git a/.changeset/shaggy-comics-fail.md b/.changeset/shaggy-comics-fail.md
new file mode 100644
index 0000000000..981a25c978
--- /dev/null
+++ b/.changeset/shaggy-comics-fail.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: `append_styles` in an effect to make them available on mount
diff --git a/packages/svelte/src/internal/client/dom/css.js b/packages/svelte/src/internal/client/dom/css.js
index 52be36aa1f..8e6faa0e32 100644
--- a/packages/svelte/src/internal/client/dom/css.js
+++ b/packages/svelte/src/internal/client/dom/css.js
@@ -1,6 +1,6 @@
 import { DEV } from 'esm-env';
-import { queue_micro_task } from './task.js';
 import { register_style } from '../dev/css.js';
+import { effect } from '../reactivity/effects.js';
 
 /**
  * @param {Node} anchor
@@ -8,7 +8,7 @@ import { register_style } from '../dev/css.js';
  */
 export function append_styles(anchor, css) {
 	// Use `queue_micro_task` to ensure `anchor` is in the DOM, otherwise getRootNode() will yield wrong results
-	queue_micro_task(() => {
+	effect(() => {
 		var root = anchor.getRootNode();
 
 		var target = /** @type {ShadowRoot} */ (root).host
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/_config.js
new file mode 100644
index 0000000000..99a223492b
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/_config.js
@@ -0,0 +1,21 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<custom-element></custom-element>';
+		/** @type {any} */
+		const el = target.querySelector('custom-element');
+
+		/** @type {string} */
+		let html = '';
+		const handle_evt = (e) => (html = e.detail);
+		el.addEventListener('html', handle_evt);
+
+		await tick();
+		await tick();
+		await tick();
+
+		assert.ok(html.includes('<style'));
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/main.svelte
new file mode 100644
index 0000000000..ad8027f4d2
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune-access-injected-css/main.svelte
@@ -0,0 +1,16 @@
+<svelte:options css="injected" customElement="custom-element"/>
+
+<script lang="ts">
+  $effect(() => {
+    $host().dispatchEvent(new CustomEvent("html", { detail: $host().shadowRoot?.innerHTML }));
+  })
+</script>
+
+<button class="btn">btn</button>
+
+<style >
+  .btn {
+    width: 123px;
+    height: 123px;
+  }
+</style>
\ No newline at end of file