fix

Author: trueadm

packages/svelte/src/internal/client/dom/css.js

@@ -1,19 +1,24 @@
+import { queue_micro_task } from './task';
+
 /**
  * @param {Node} anchor
  * @param {{ hash: string, code: string }} css
  */
 export function append_styles(anchor, css) {
-	var root = anchor.getRootNode();
+	// Use `queue_micro_task` to ensure `anchor` is in the DOM, otherwise getRootNode() will yield wrong results
+	queue_micro_task(() => {
+		var root = anchor.getRootNode();
 
-	var target = /** @type {ShadowRoot} */ (root).host
-		? /** @type {ShadowRoot} */ (root)
-		: /** @type {Document} */ (root).head ?? /** @type {Document} */ (root.ownerDocument).head;
+		var target = /** @type {ShadowRoot} */ (root).host
+			? /** @type {ShadowRoot} */ (root)
+			: /** @type {Document} */ (root).head ?? /** @type {Document} */ (root.ownerDocument).head;
 
-	if (!target.querySelector('#' + css.hash)) {
-		const style = document.createElement('style');
-		style.id = css.hash;
-		style.textContent = css.code;
+		if (!target.querySelector('#' + css.hash)) {
+			const style = document.createElement('style');
+			style.id = css.hash;
+			style.textContent = css.code;
 
-		target.appendChild(style);
-	}
+			target.appendChild(style);
+		}
+	});
 }