fix: exclude custom elements from HTML tree validation (#13540)

fixes #13537

.changeset/chilly-glasses-retire.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: exclude custom elements from HTML tree validation

packages/svelte/src/html-tree-validation.js

@@ -142,12 +142,17 @@ const disallowed_children = {
  * @returns {boolean}
  */
 export function is_tag_valid_with_ancestor(tag, ancestors) {
+	if (tag.includes('-')) return true; // custom elements can be anything
+
 	const target = ancestors[ancestors.length - 1];
 	const disallowed = disallowed_children[target];
 	if (!disallowed) return true;
 
 	if ('reset_by' in disallowed && disallowed.reset_by) {
 		for (let i = ancestors.length - 2; i >= 0; i--) {
+			const ancestor = ancestors[i];
+			if (ancestor.includes('-')) return true; // custom elements can be anything
+
 			// A reset means that forbidden descendants are allowed again
 			if (disallowed.reset_by.includes(ancestors[i])) {
 				return true;
@@ -166,6 +171,8 @@ export function is_tag_valid_with_ancestor(tag, ancestors) {
  * @returns {boolean}
  */
 export function is_tag_valid_with_parent(tag, parent_tag) {
+	if (tag.includes('-') || parent_tag?.includes('-')) return true; // custom elements can be anything
+
 	if (parent_tag !== null) {
 		const disallowed = disallowed_children[parent_tag];
 

packages/svelte/tests/validator/samples/invalid-node-placement-6/errors.json

@@ -3,11 +3,11 @@
 		"code": "node_invalid_placement",
 		"message": "`<dt>` is invalid inside `<dd>`",
 		"start": {
-			"line": 11,
+			"line": 16,
 			"column": 3
 		},
 		"end": {
-			"line": 11,
+			"line": 16,
 			"column": 19
 		}
 	}

packages/svelte/tests/validator/samples/invalid-node-placement-6/input.svelte

@@ -6,6 +6,11 @@
 			<dt>valid</dt>
 			<dd>valid</dd>
 		</dl>
+		<!-- custom element resets the validation -->
+		<foo-bar>
+			<dt>valid</dt>
+			<dd>valid</dd>
+		</foo-bar>
 		<!-- other tags don't -->
 		<div>
 			<dt>invalid</dt>

packages/svelte/tests/validator/samples/invalid-node-placement-7/errors.json

@@ -0,0 +1,14 @@
+[
+	{
+		"code": "node_invalid_placement",
+		"message": "`<tbody>` is invalid inside `<div>`",
+		"start": {
+			"line": 8,
+			"column": 1
+		},
+		"end": {
+			"line": 8,
+			"column": 16
+		}
+	}
+]

packages/svelte/tests/validator/samples/invalid-node-placement-7/input.svelte

@@ -0,0 +1,9 @@
+<some-table>
+	<!-- No error -->
+	<tbody></tbody>
+</some-table>
+
+<div>
+	<!-- Error -->
+	<tbody></tbody>
+</div>