illegal-attribute-character

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -49,8 +49,12 @@ function validate_component(node, context) {
 			error(attribute, 'invalid-event-modifier');
 		}
 
-		if (attribute.type === 'Attribute' && attribute.name === 'slot') {
-			validate_slot_attribute(context, attribute);
+		if (attribute.type === 'Attribute') {
+			validate_attribute_name(attribute, context);
+
+			if (attribute.name === 'slot') {
+				validate_slot_attribute(context, attribute);
+			}
 		}
 	}
 
@@ -76,6 +80,8 @@ function validate_element(node, context) {
 				error(attribute, 'invalid-attribute-name', attribute.name);
 			}
 
+			validate_attribute_name(attribute, context);
+
 			if (attribute.name.startsWith('on') && attribute.name.length > 2) {
 				if (!is_expression_attribute(attribute)) {
 					error(attribute, 'invalid-event-attribute-value');
@@ -166,6 +172,21 @@ function validate_element(node, context) {
 	}
 }
 
+/**
+ * @param {import('#compiler').Attribute} attribute
+ * @param {import('zimmerframe').Context<import('#compiler').SvelteNode, import('./types.js').AnalysisState>} context
+ */
+function validate_attribute_name(attribute, context) {
+	if (
+		attribute.name.includes(':') &&
+		!attribute.name.startsWith('xmlns:') &&
+		!attribute.name.startsWith('xlink:') &&
+		!attribute.name.startsWith('xml:')
+	) {
+		warn(context.state.analysis.warnings, attribute, context.path, 'illegal-attribute-character');
+	}
+}
+
 /**
  * @param {import('zimmerframe').Context<import('#compiler').SvelteNode, import('./types.js').AnalysisState>} context
  * @param {import('#compiler').Attribute} attribute

packages/svelte/src/compiler/warnings.js

@@ -15,7 +15,9 @@ const attributes = {
 	'avoid-is': () => 'The "is" attribute is not supported cross-browser and should be avoided',
 	/** @param {string} name */
 	'global-event-reference': (name) =>
-		`You are referencing globalThis.${name}. Did you forget to declare a variable with that name?`
+		`You are referencing globalThis.${name}. Did you forget to declare a variable with that name?`,
+	'illegal-attribute-character': () =>
+		"Attributes should not contain ':' characters to prevent ambiguity with Svelte directives"
 };
 
 /** @satisfies {Warnings} */

packages/svelte/tests/validator/samples/illegal-attribute-character/_config.js

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