feat: svelte head body separation for nested components in <svelte:head> tag

.changeset/cute-times-flash.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+support nested components in <svelte:head>

packages/svelte/src/internal/client/dom/blocks/svelte-head.js

@@ -49,7 +49,30 @@ export function head(hash, render_fn) {
 	}
 
 	try {
+		// Track nodes added to head before render
+		const head_children_before = Array.from(document.head.children);
+		const head_child_count_before = head_children_before.length;
+
 		block(() => render_fn(anchor), HEAD_EFFECT);
+
+		// After rendering, check if non-head elements were added and move them to body
+		const head_child_count_after = document.head.children.length;
+		if (head_child_count_after > head_children_before.length) {
+			// Elements were added to head, check if any are non-head elements
+			const new_children = Array.from(document.head.children).slice(head_child_count_before);
+			for (const child of new_children) {
+				// Move non-head-specific elements to body
+				if (child.nodeType === 1) {
+					// ELEMENT_NODE
+					const tag = child.tagName.toLowerCase();
+					// Only keep head-specific elements (script, meta, link, style, title, base, noscript)
+					// Move div, span, and other body elements to the body
+					if (!['script', 'meta', 'link', 'style', 'title', 'base', 'noscript'].includes(tag)) {
+						document.body.appendChild(child);
+					}
+				}
+			}
+		}
 	} finally {
 		if (was_hydrating) {
 			set_hydrating(true);

packages/svelte/src/internal/server/index.js

@@ -70,10 +70,30 @@ export function render(component, options = {}) {
  * @returns {void}
  */
 export function head(hash, renderer, fn) {
-	renderer.head((renderer) => {
-		renderer.push(`<!--${hash}-->`);
-		renderer.child(fn);
-		renderer.push(EMPTY_COMMENT);
+	renderer.head((parent_renderer) => {
+		parent_renderer.push(`<!--${hash}-->`);
+
+		// Create a capture renderer to collect all output from the function
+		const capture_renderer = new Renderer(parent_renderer.global, parent_renderer);
+		const result = fn(capture_renderer);
+
+		if (result instanceof Promise) {
+			return result.then(() => {
+				// Collect content and only push head content
+				const content = capture_renderer.collect_sync();
+				if (content.head) {
+					parent_renderer.push(content.head);
+				}
+			});
+		} else {
+			// Collect content and only push head content
+			const content = capture_renderer.collect_sync();
+			if (content.head) {
+				parent_renderer.push(content.head);
+			}
+		}
+
+		parent_renderer.push(EMPTY_COMMENT);
 	});
 }
 

packages/svelte/src/internal/server/renderer.js

@@ -371,6 +371,14 @@ export class Renderer {
 		return this.#out.length;
 	}
 
+	/**
+	 * Collect all content from this renderer (both head and body) synchronously.
+	 * @returns {AccumulatedContent}
+	 */
+	collect_sync() {
+		return this.#collect_content();
+	}
+
 	/**
 	 * Only available on the server and when compiling with the `server` option.
 	 * Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app.

packages/svelte/tests/runtime-browser/samples/head-nested-body-separation/Child.svelte

@@ -0,0 +1,5 @@
+<svelte:head>
+	<meta name="child-data" content="value" />
+</svelte:head>
+
+<p>Child body</p>

packages/svelte/tests/runtime-browser/samples/head-nested-body-separation/_config.js

@@ -0,0 +1,24 @@
+import { test } from '../../assert';
+
+export default test({
+	async test({ assert, target }) {
+		// Test 1: Verify body content appears in body, not head
+		const mainContent = target.querySelector('main');
+		assert.ok(mainContent, 'Main element should exist in body');
+		assert.equal(mainContent?.textContent, 'Main content');
+
+		// Test 2: Verify head contains meta tag (head-specific)
+		const metaTag = document.head.querySelector('meta[name="child-data"]');
+		assert.ok(metaTag, 'Meta tag should be in head');
+		assert.equal(metaTag?.getAttribute('content'), 'value');
+
+		// Test 3: Verify title is in head
+		const titleTag = document.head.querySelector('title');
+		assert.ok(titleTag, 'Title should be in head');
+		assert.equal(titleTag?.textContent, 'CSR Test');
+
+		// Test 4: Verify body elements are NOT in head
+		const pInHead = document.head.querySelector('p');
+		assert.equal(pInHead, null, 'Paragraph element should NOT be in head');
+	}
+});

packages/svelte/tests/runtime-browser/samples/head-nested-body-separation/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:head>
+	<title>CSR Test</title>
+	<Child />
+</svelte:head>
+
+<main>Main content</main>

packages/svelte/tests/server-side-rendering/samples/head-nested-body-separation/Child.svelte

@@ -0,0 +1,5 @@
+<svelte:head>
+	<meta name="child-meta" content="test" />
+</svelte:head>
+
+<div>Child body</div>

packages/svelte/tests/server-side-rendering/samples/head-nested-body-separation/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async', 'sync']
+});

packages/svelte/tests/server-side-rendering/samples/head-nested-body-separation/_expected.html

@@ -0,0 +1 @@
+<!--[--><main>Main content</main><!--]-->

packages/svelte/tests/server-side-rendering/samples/head-nested-body-separation/_expected_head.html

@@ -0,0 +1 @@
+<!--22lmcx--><!--5uyrne--><meta name="child-meta" content="test"/><!----><div>Child body</div><!----><title>Parent Title</title>

packages/svelte/tests/server-side-rendering/samples/head-nested-body-separation/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<svelte:head>
+	<title>Parent Title</title>
+	<Child />
+</svelte:head>
+
+<main>Main content</main>