Support <svelte:head> with nested Component with <svelte:head> in SSR

[maxiruani]

Describe the problem

When a parent component has a <svelte:head> tag and a nested component inside it with a also a <svelte:head>, the content of the head tag of the nested component is stripped out in SSR.

Example:

Parent component

<script>
	import ChildNested from './ChildNested.svelte'
</script>

<svelte:head> _PREFIX_ <ChildNested /> _SUFFIX_</svelte:head>

Child component

<svelte:head>_NESTED_HEAD_</svelte:head>
_NESTED_BODY_

Simple reproduction REPL, you can see the generated code for SSR at JS output tab.

Pseudo equivalent generated code to understand the problem within the browser console:

const $$result = { head: '' };

function $$render(result) {
    result.head += '_NESTED_HEAD_';
    return '_NESTED_BODY_';
}

$$result.head += `_PREFIX_ ${$$render($$result)} _SUFFIX_`;

console.log($$result.head); // Logs "_PREFIX_ _NESTED_BODY_  _SUFFIX_"

Related issues / discussions.

Describe the proposed solution

At $$render if parent is a svelte:head return head content as body.

Alternatives considered

Maybe changing what create_ssr_component returns (return both head and body) or separate head and body rendering in different statements.

Importance

nice to have

[msf-caesar]

Try with separating the rendering of the parent component's head and body in different statements, so that the head content of the nested component is not stripped out in SSR. Alternatively, you could modify the create_ssr_component function to return both the head and body, ensuring that the head content is included in the SSR output.

[polarisdigitech]

Having this same issue, but mine doesn't involve a component placed in the <svelte:head> of the parent component