fix: use non-destructive hydration for all @html tags (#8880)

html tags that could be optimized to use innerHTML in mount ignored any hydration code, which leads to everything getting unmounted and mounted again. This takes the non-optimized path for hydration, too.

fixes sveltejs/kit#10245

Author: dummdidumm

.changeset/pretty-trees-prove.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: use non-destructive hydration for all `@html` tags

packages/svelte/src/compiler/compile/render_dom/wrappers/RawMustacheTag.js

@@ -26,7 +26,7 @@ export default class RawMustacheTagWrapper extends Tag {
 	render(block, parent_node, _parent_nodes) {
 		const in_head = is_head(parent_node);
 		const can_use_innerhtml = !in_head && parent_node && !this.prev && !this.next;
-		if (can_use_innerhtml) {
+		if (can_use_innerhtml && !this.renderer.options.hydratable) {
 			/** @param {import('estree').Node} content */
 			const insert = (content) => b`${parent_node}.innerHTML = ${content};`[0];
 			const { init } = this.rename_this_method(block, (content) => insert(content));

packages/svelte/test/runtime/samples/svg-html-tag3/_config.js

@@ -1,9 +1,7 @@
 export default {
 	html: `
 			<svg>
-			  <foreignObject>
-				  <circle cx="25" cy="30" r="24" fill="#FFD166"></circle>
-				</foreignObject>
+				<foreignObject><!-- HTML_TAG_START --><circle cx="25" cy="30" r="24" fill="#FFD166"></circle><!-- HTML_TAG_END --></foreignObject>
 			</svg>
 		`,
 	test({ assert, target, component }) {

packages/svelte/test/runtime/samples/svg-html-tag3/main.svelte

@@ -1,7 +1,7 @@
 <script>
-	export let width = 100
-	export let height = 60
-	$: circle = `<circle cx="${width/4}" cy="${height/2}" r="24" fill="#FFD166"/>`
+	export let width = 100;
+	export let height = 60;
+	$: circle = `<circle cx="${width / 4}" cy="${height / 2}" r="24" fill="#FFD166"></circle>`;
 </script>
 
 <svg>