fix: ssr comments in head elements that require raw content (#10936)

* added raw elements set

* added test

* added changeset

* moved raw text elements to constands and made array

* moved to correct constants

* fix test

* fix constants formatting

Author: DanMB

.changeset/khaki-tomatoes-rule.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ssr comments in head elements that require raw content

packages/svelte/src/constants.js

@@ -25,6 +25,9 @@ export const HYDRATION_END_ELSE = `${HYDRATION_END}!`; // used to indicate that
 
 export const UNINITIALIZED = Symbol();
 
+/** List of elements that require raw contents and should not have SSR comments put in them */
+export const RawTextElements = ['textarea', 'script', 'style', 'title'];
+
 /** List of Element events that will be delegated */
 export const DelegatedEvents = [
 	'beforeinput',

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

@@ -3,6 +3,7 @@ import { subscribe_to_store } from '../../store/utils.js';
 import {
 	UNINITIALIZED,
 	DOMBooleanAttributes,
+	RawTextElements,
 	disallowed_paragraph_contents,
 	interactive_elements,
 	is_tag_valid_with_parent
@@ -161,11 +162,11 @@ export function element(payload, tag, attributes_fn, children_fn) {
 	payload.out += `>`;
 
 	if (!VoidElements.has(tag)) {
-		if (tag !== 'textarea') {
+		if (!RawTextElements.includes(tag)) {
 			payload.out += BLOCK_OPEN;
 		}
 		children_fn();
-		if (tag !== 'textarea') {
+		if (!RawTextElements.includes(tag)) {
 			payload.out += BLOCK_CLOSE;
 		}
 		payload.out += `</${tag}>`;

packages/svelte/tests/server-side-rendering/samples/head-svelte-components-raw-content/_config.js

@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		preserveComments: true
+	}
+});

packages/svelte/tests/server-side-rendering/samples/head-svelte-components-raw-content/_expected.html

@@ -0,0 +1,16 @@
+<!--[-->
+<!--[-->
+<title>lorem</title>
+<!--]-->
+<!--[-->
+<style>
+	.ipsum {
+		display: block;
+	}
+</style>
+<!--]-->
+<!--[-->
+<script>
+	console.log(true);
+</script>
+<!--]--><!--]-->

packages/svelte/tests/server-side-rendering/samples/head-svelte-components-raw-content/main.svelte

@@ -0,0 +1,3 @@
+<svelte:element this="title">lorem</svelte:element>
+<svelte:element this="style">{'.ipsum { display: block; }'}</svelte:element>
+<svelte:element this="script">{'console.log(true);'}</svelte:element>