fix: better handle hydration of script/style elements

Author: trueadm

.changeset/rotten-yaks-nail.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: better handle hydration of script/style elements

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

@@ -40,7 +40,16 @@ export function set_hydrate_node(node) {
 }
 
 export function hydrate_next() {
-	return set_hydrate_node(/** @type {TemplateNode} */ (get_next_sibling(hydrate_node)));
+	var sibling = /** @type {TemplateNode} */ (get_next_sibling(hydrate_node));
+	if (sibling === null) {
+		var parent_node_name = hydrate_node.parentNode?.nodeName;
+		// If we're hydrating inside a <script> or <style> element then there is no
+		// closing anchor
+		if (parent_node_name === 'SCRIPT' || parent_node_name === 'STYLE') {
+			return;
+		}
+	}
+	return set_hydrate_node(sibling);
 }
 
 /** @param {TemplateNode} node */

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

@@ -64,7 +64,7 @@ export function element(payload, tag, attributes_fn = noop, children_fn = noop)
 	payload.out += '<!---->';
 
 	if (tag) {
-		payload.out += `<${tag} `;
+		payload.out += `<${tag}`;
 		attributes_fn();
 		payload.out += `>`;
 

packages/svelte/tests/hydration/samples/script/_config.js

@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	snapshot(target) {
+		const script = target.querySelector('script');
+
+		return {
+			script
+		};
+	}
+});

packages/svelte/tests/hydration/samples/script/main.svelte

@@ -0,0 +1 @@
+<svelte:element this={"script"}>{"{}"}</svelte:element>