From 4978d292c8942b9f0b8b2061a90c7b942a3867ef Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Tue, 16 Jan 2024 12:52:46 +0000
Subject: [PATCH] chore: add dev time html mismatch error

---
 .changeset/calm-pants-hammer.md               |  5 +++++
 packages/svelte/src/internal/client/render.js | 12 +++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/calm-pants-hammer.md

diff --git a/.changeset/calm-pants-hammer.md b/.changeset/calm-pants-hammer.md
new file mode 100644
index 000000000..233beb999
--- /dev/null
+++ b/.changeset/calm-pants-hammer.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+chore: add dev time html mismatch error
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index bb1650748..a805853c4 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -83,6 +83,13 @@ export function template(html, is_fragment) {
 		if (cached_content === undefined) {
 			const content = create_fragment_from_html(html);
 			cached_content = is_fragment ? content : /** @type {Node} */ (child(content));
+			if (DEV && cached_content instanceof Element && cached_content.innerHTML !== html) {
+				throw Error(
+					'Svelte detected a mismatch when trying to generate a HTML template. This typically occurs due to the incorrect nesting of HTML elements ' +
+						'(such as a <p> element nested within a <p>, or an <a> element nested within an <a>).' +
+						`\n\nSvelte attempted to generate the HTML template:\n\n${html}\n\nHowever, the browser parsed this HTML as:\n\n${cached_content.innerHTML}`
+				);
+			}
 		}
 		return cached_content;
 	};
@@ -135,9 +142,8 @@ function open_template(is_fragment, use_clone_node, anchor, template_element_fn)
 			return is_fragment ? fragment : /** @type {Element} */ (fragment[0]);
 		}
 	}
-	return use_clone_node
-		? clone_node(/** @type {() => Element} */ (template_element_fn)(), true)
-		: document.importNode(/** @type {() => Element} */ (template_element_fn)(), true);
+	const template = /** @type {() => Element} */ (template_element_fn)();
+	return use_clone_node ? clone_node(template, true) : document.importNode(template, true);
 }
 
 /**