diff --git a/packages/svelte/src/compiler/compile/compiler_warnings.js b/packages/svelte/src/compiler/compile/compiler_warnings.js
index acd9409734e6..46cb9a3f2709 100644
--- a/packages/svelte/src/compiler/compile/compiler_warnings.js
+++ b/packages/svelte/src/compiler/compile/compiler_warnings.js
@@ -10,9 +10,9 @@ export default {
 	 * @param {string} component
 	 * @param {string} property
 	 */ (component, property) => ({
-		code: 'unused-export-let',
-		message: `${component} has unused export property '${property}'. If it is for external reference only, please consider using \`export const ${property}\``
-	}),
+			code: 'unused-export-let',
+			message: `${component} has unused export property '${property}'. If it is for external reference only, please consider using \`export const ${property}\``
+		}),
 	module_script_reactive_declaration: {
 		code: 'module-script-reactive-declaration',
 		message: '$: has no effect in a module script'
@@ -23,21 +23,20 @@ export default {
 	},
 	module_script_variable_reactive_declaration: /** @param {string[]} names */ (names) => ({
 		code: 'module-script-reactive-declaration',
-		message: `${names.map((name) => `"${name}"`).join(', ')} ${
-			names.length > 1 ? 'are' : 'is'
-		} declared in a module script and will not be reactive`
+		message: `${names.map((name) => `"${name}"`).join(', ')} ${names.length > 1 ? 'are' : 'is'
+			} declared in a module script and will not be reactive`
 	}),
 	missing_declaration: /**
 	 * @param {string} name
 	 * @param {boolean} has_script
 	 */ (name, has_script) => ({
-		code: 'missing-declaration',
-		message:
-			`'${name}' is not defined` +
-			(has_script
-				? ''
-				: `. Consider adding a <script> block with 'export let ${name}' to declare a prop`)
-	}),
+			code: 'missing-declaration',
+			message:
+				`'${name}' is not defined` +
+				(has_script
+					? ''
+					: `. Consider adding a <script> block with 'export let ${name}' to declare a prop`)
+		}),
 	missing_custom_element_compile_options: {
 		code: 'missing-custom-element-compile-options',
 		message:
@@ -67,9 +66,9 @@ export default {
 	 * @param {string} name
 	 * @param {string} suggestion
 	 */ (name, suggestion) => ({
-		code: 'invalid-html-attribute',
-		message: `'${name}' is not a valid HTML attribute. Did you mean '${suggestion}'?`
-	}),
+			code: 'invalid-html-attribute',
+			message: `'${name}' is not a valid HTML attribute. Did you mean '${suggestion}'?`
+		}),
 	a11y_aria_attributes: /** @param {string} name */ (name) => ({
 		code: 'a11y-aria-attributes',
 		message: `A11y: <${name}> should not have aria-* attributes`
@@ -78,47 +77,47 @@ export default {
 	 * @param {import('aria-query').ARIAPropertyDefinition} schema
 	 * @param {string} attribute
 	 */ (schema, attribute) => {
-		let message;
-		switch (schema.type) {
-			case 'boolean':
-				message = `The value of '${attribute}' must be exactly one of true or false`;
-				break;
-			case 'id':
-				message = `The value of '${attribute}' must be a string that represents a DOM element ID`;
-				break;
-			case 'idlist':
-				message = `The value of '${attribute}' must be a space-separated list of strings that represent DOM element IDs`;
-				break;
-			case 'tristate':
-				message = `The value of '${attribute}' must be exactly one of true, false, or mixed`;
-				break;
-			case 'token':
-				message = `The value of '${attribute}' must be exactly one of ${(schema.values || []).join(
-					', '
-				)}`;
-				break;
-			case 'tokenlist':
-				message = `The value of '${attribute}' must be a space-separated list of one or more of ${(
-					schema.values || []
-				).join(', ')}`;
-				break;
-			default:
-				message = `The value of '${attribute}' must be of type ${schema.type}`;
-		}
-		return {
-			code: 'a11y-incorrect-aria-attribute-type',
-			message: `A11y: ${message}`
-		};
-	},
+			let message;
+			switch (schema.type) {
+				case 'boolean':
+					message = `The value of '${attribute}' must be exactly one of true or false`;
+					break;
+				case 'id':
+					message = `The value of '${attribute}' must be a string that represents a DOM element ID`;
+					break;
+				case 'idlist':
+					message = `The value of '${attribute}' must be a space-separated list of strings that represent DOM element IDs`;
+					break;
+				case 'tristate':
+					message = `The value of '${attribute}' must be exactly one of true, false, or mixed`;
+					break;
+				case 'token':
+					message = `The value of '${attribute}' must be exactly one of ${(schema.values || []).join(
+						', '
+					)}`;
+					break;
+				case 'tokenlist':
+					message = `The value of '${attribute}' must be a space-separated list of one or more of ${(
+						schema.values || []
+					).join(', ')}`;
+					break;
+				default:
+					message = `The value of '${attribute}' must be of type ${schema.type}`;
+			}
+			return {
+				code: 'a11y-incorrect-aria-attribute-type',
+				message: `A11y: ${message}`
+			};
+		},
 	a11y_unknown_aria_attribute: /**
 	 * @param {string} attribute
 	 * @param {string} [suggestion]
 	 */ (attribute, suggestion) => ({
-		code: 'a11y-unknown-aria-attribute',
-		message:
-			`A11y: Unknown aria attribute 'aria-${attribute}'` +
-			(suggestion ? ` (did you mean '${suggestion}'?)` : '')
-	}),
+			code: 'a11y-unknown-aria-attribute',
+			message:
+				`A11y: Unknown aria attribute 'aria-${attribute}'` +
+				(suggestion ? ` (did you mean '${suggestion}'?)` : '')
+		}),
 	a11y_hidden: /** @param {string} name */ (name) => ({
 		code: 'a11y-hidden',
 		message: `A11y: <${name}> element should not be hidden`
@@ -131,9 +130,9 @@ export default {
 	 * @param {string | boolean} role
 	 * @param {string} [suggestion]
 	 */ (role, suggestion) => ({
-		code: 'a11y-unknown-role',
-		message: `A11y: Unknown role '${role}'` + (suggestion ? ` (did you mean '${suggestion}'?)` : '')
-	}),
+			code: 'a11y-unknown-role',
+			message: `A11y: Unknown role '${role}'` + (suggestion ? ` (did you mean '${suggestion}'?)` : '')
+		}),
 	a11y_no_abstract_role: /** @param {string | boolean} role */ (role) => ({
 		code: 'a11y-no-abstract-role',
 		message: `A11y: Abstract role '${role}' is forbidden`
@@ -146,18 +145,17 @@ export default {
 	 * @param {string} element
 	 * @param {string[]} handlers
 	 */ (element, handlers) => ({
-		code: 'a11y-no-static-element-interactions',
-		message: `A11y: <${element}> with ${handlers.join(', ')} ${
-			handlers.length === 1 ? 'handler' : 'handlers'
-		} must have an ARIA role`
-	}),
+			code: 'a11y-no-static-element-interactions',
+			message: `A11y: <${element}> with ${handlers.join(', ')} ${handlers.length === 1 ? 'handler' : 'handlers'
+				} must have an ARIA role`
+		}),
 	a11y_no_interactive_element_to_noninteractive_role: /**
 	 * @param {string | boolean} role
 	 * @param {string} element
 	 */ (role, element) => ({
-		code: 'a11y-no-interactive-element-to-noninteractive-role',
-		message: `A11y: <${element}> cannot have role '${role}'`
-	}),
+			code: 'a11y-no-interactive-element-to-noninteractive-role',
+			message: `A11y: <${element}> cannot have role '${role}'`
+		}),
 	a11y_no_noninteractive_element_interactions: /** @param {string} element */ (element) => ({
 		code: 'a11y-no-noninteractive-element-interactions',
 		message: `A11y: Non-interactive element <${element}> should not be assigned mouse or keyboard event listeners.`
@@ -166,33 +164,33 @@ export default {
 	 * @param {string | boolean} role
 	 * @param {string} element
 	 */ (role, element) => ({
-		code: 'a11y-no-noninteractive-element-to-interactive-role',
-		message: `A11y: Non-interactive element <${element}> cannot have interactive role '${role}'`
-	}),
+			code: 'a11y-no-noninteractive-element-to-interactive-role',
+			message: `A11y: Non-interactive element <${element}> cannot have interactive role '${role}'`
+		}),
 	a11y_role_has_required_aria_props: /**
 	 * @param {string} role
 	 * @param {string[]} props
 	 */ (role, props) => ({
-		code: 'a11y-role-has-required-aria-props',
-		message: `A11y: Elements with the ARIA role "${role}" must have the following attributes defined: ${props
-			.map((name) => `"${name}"`)
-			.join(', ')}`
-	}),
+			code: 'a11y-role-has-required-aria-props',
+			message: `A11y: Elements with the ARIA role "${role}" must have the following attributes defined: ${props
+				.map((name) => `"${name}"`)
+				.join(', ')}`
+		}),
 	a11y_role_supports_aria_props: /**
 	 * @param {string} attribute
 	 * @param {string} role
 	 * @param {boolean} is_implicit
 	 * @param {string} name
 	 */ (attribute, role, is_implicit, name) => {
-		let message = `The attribute '${attribute}' is not supported by the role '${role}'.`;
-		if (is_implicit) {
-			message += ` This role is implicit on the element <${name}>.`;
-		}
-		return {
-			code: 'a11y-role-supports-aria-props',
-			message: `A11y: ${message}`
-		};
-	},
+			let message = `The attribute '${attribute}' is not supported by the role '${role}'.`;
+			if (is_implicit) {
+				message += ` This role is implicit on the element <${name}>.`;
+			}
+			return {
+				code: 'a11y-role-supports-aria-props',
+				message: `A11y: ${message}`
+			};
+		},
 	a11y_accesskey: {
 		code: 'a11y-accesskey',
 		message: 'A11y: Avoid using accesskey'
@@ -213,26 +211,25 @@ export default {
 	 * @param {string} href_attribute
 	 * @param {string} href_value
 	 */ (href_attribute, href_value) => ({
-		code: 'a11y-invalid-attribute',
-		message: `A11y: '${href_value}' is not a valid ${href_attribute} attribute`
-	}),
+			code: 'a11y-invalid-attribute',
+			message: `A11y: '${href_value}' is not a valid ${href_attribute} attribute`
+		}),
 	a11y_missing_attribute: /**
 	 * @param {string} name
 	 * @param {string} article
 	 * @param {string} sequence
 	 */ (name, article, sequence) => ({
-		code: 'a11y-missing-attribute',
-		message: `A11y: <${name}> element should have ${article} ${sequence} attribute`
-	}),
+			code: 'a11y-missing-attribute',
+			message: `A11y: <${name}> element should have ${article} ${sequence} attribute`
+		}),
 	a11y_autocomplete_valid: /**
 	 * @param {null | true | string} type
 	 * @param {null | true | string} value
 	 */ (type, value) => ({
-		code: 'a11y-autocomplete-valid',
-		message: `A11y: The value '${value}' is not supported by the attribute 'autocomplete' on element <input type="${
-			type || '...'
-		}">`
-	}),
+			code: 'a11y-autocomplete-valid',
+			message: `A11y: The value '${value}' is not supported by the attribute 'autocomplete' on element <input type="${type || '...'
+				}">`
+		}),
 	a11y_img_redundant_alt: {
 		code: 'a11y-img-redundant-alt',
 		message: 'A11y: Screenreaders already announce <img> elements as an image.'
@@ -265,9 +262,9 @@ export default {
 	 * @param {string} event
 	 * @param {string} accompanied_by
 	 */ (event, accompanied_by) => ({
-		code: 'a11y-mouse-events-have-key-events',
-		message: `A11y: on:${event} must be accompanied by on:${accompanied_by}`
-	}),
+			code: 'a11y-mouse-events-have-key-events',
+			message: `A11y: on:${event} must be accompanied by on:${accompanied_by}`
+		}),
 	a11y_click_events_have_key_events: {
 		code: 'a11y-click-events-have-key-events',
 		message:
@@ -306,5 +303,12 @@ export default {
 		code: 'illegal-attribute-character',
 		message:
 			"Attributes should not contain ':' characters to prevent ambiguity with Svelte directives"
-	}
+	},
+	binding_custom_element: /**
+	 * @param {string} element
+	 * @param {string} binding
+	 */ (element, binding) => ({
+			code: 'binding-custom-element',
+			message: `'Binding on custom element <${element}> is not checked. You need to ensure '${binding}' is a valid property.'`
+		}),
 };
diff --git a/packages/svelte/src/compiler/compile/nodes/Element.js b/packages/svelte/src/compiler/compile/nodes/Element.js
index 248f831f66ea..a20fcf7d5adc 100644
--- a/packages/svelte/src/compiler/compile/nodes/Element.js
+++ b/packages/svelte/src/compiler/compile/nodes/Element.js
@@ -402,7 +402,7 @@ export default class Element extends Node {
 					component,
 					this,
 					scope,
-					/** @type {import('estree').Literal} */ (string_literal(info.tag))
+					/** @type {import('estree').Literal} */(string_literal(info.tag))
 				);
 				this.name = info.tag;
 			}
@@ -411,10 +411,10 @@ export default class Element extends Node {
 				component,
 				this,
 				scope,
-				/** @type {import('estree').Literal} */ (string_literal(this.name))
+				/** @type {import('estree').Literal} */(string_literal(this.name))
 			);
 		}
-		this.namespace = get_namespace(/** @type {Element} */ (parent), this, component.namespace);
+		this.namespace = get_namespace(/** @type {Element} */(parent), this, component.namespace);
 		if (this.namespace !== namespaces.foreign) {
 			if (this.name === 'pre' || this.name === 'textarea') {
 				const first = info.children[0];
@@ -627,9 +627,9 @@ export default class Element extends Node {
 				if (
 					value !== null &&
 					value !== undefined &&
-					aria.has(/** @type {import('aria-query').ARIAProperty} */ (name))
+					aria.has(/** @type {import('aria-query').ARIAProperty} */(name))
 				) {
-					const schema = aria.get(/** @type {import('aria-query').ARIAProperty} */ (name));
+					const schema = aria.get(/** @type {import('aria-query').ARIAProperty} */(name));
 					if (!is_valid_aria_attribute_value(schema, value)) {
 						component.warn(
 							attribute,
@@ -656,9 +656,9 @@ export default class Element extends Node {
 				const value = attribute.get_static_value();
 				if (typeof value === 'string') {
 					value.split(regex_any_repeated_whitespaces).forEach(
-						/** @param {import('aria-query').ARIARoleDefinitionKey} current_role */ (
-							current_role
-						) => {
+						/** @param {import('aria-query').ARIARoleDefinitionKey} current_role */(
+						current_role
+					) => {
 							if (current_role && is_abstract_role(current_role)) {
 								component.warn(attribute, compiler_warnings.a11y_no_abstract_role(current_role));
 							} else if (current_role && !aria_role_set.has(current_role)) {
@@ -786,7 +786,7 @@ export default class Element extends Node {
 			const is_non_presentation_role =
 				role?.is_static &&
 				!is_presentation_role(
-					/** @type {import('aria-query').ARIARoleDefinitionKey} */ (role.get_static_value())
+					/** @type {import('aria-query').ARIARoleDefinitionKey} */(role.get_static_value())
 				);
 			if (
 				!this.is_dynamic_element &&
@@ -829,7 +829,7 @@ export default class Element extends Node {
 				.filter((prop) => prop.type !== 'Spread')
 				.forEach((prop) => {
 					if (
-						invalid_aria_props.has(/** @type {import('aria-query').ARIAProperty} */ (prop.name))
+						invalid_aria_props.has(/** @type {import('aria-query').ARIAProperty} */(prop.name))
 					) {
 						component.warn(
 							prop,
@@ -1020,7 +1020,7 @@ export default class Element extends Node {
 				return;
 			}
 			let has_caption;
-			const track = this.children.find(/** @param {Element} i */ (i) => i.name === 'track');
+			const track = this.children.find(/** @param {Element} i */(i) => i.name === 'track');
 			if (track) {
 				has_caption = track.attributes.find(
 					(a) => a.name === 'kind' && a.get_static_value() === 'captions'
@@ -1058,7 +1058,7 @@ export default class Element extends Node {
 				return true;
 			});
 			const index = children.findIndex(
-				(child) => /** @type {Element} */ (child).name === 'figcaption'
+				(child) => /** @type {Element} */(child).name === 'figcaption'
 			);
 			if (index !== -1 && index !== 0 && index !== children.length - 1) {
 				component.warn(children[index], compiler_warnings.a11y_structure_first_or_last);
@@ -1085,7 +1085,7 @@ export default class Element extends Node {
 		const { component } = this;
 		const check_type_attribute = () => {
 			const attribute = this.attributes.find(
-				/** @param {import('./Attribute.js').default} attribute */ (attribute) =>
+				/** @param {import('./Attribute.js').default} attribute */(attribute) =>
 					attribute.name === 'type'
 			);
 			if (!attribute) return null;
@@ -1100,7 +1100,16 @@ export default class Element extends Node {
 		};
 		this.bindings.forEach((binding) => {
 			const { name } = binding;
-			if (name === 'value') {
+
+			//custom elements (i.e. web components) can be bound to any attribute, we simply emit a warning
+			//to identify a custom element, we check if the element name contains a hyphen
+			if (this.name.includes('-')) {
+				return component.warn(
+					binding,
+					compiler_warnings.binding_custom_element(this.name, name)
+				);
+
+			} else if (name === 'value') {
 				if (this.name !== 'input' && this.name !== 'textarea' && this.name !== 'select') {
 					return component.error(
 						binding,
@@ -1314,17 +1323,17 @@ export default class Element extends Node {
 				/** @type {import('./Text.js').default} */ (class_attribute.chunks[0]).data += ` ${id}`;
 			} else {
 				/** @type {import('./shared/Node.js').default[]} */ (class_attribute.chunks).push(
-					new Text(
-						this.component,
-						this,
-						this.scope,
-						/** @type {any} */ ({
-							type: 'Text',
-							data: ` ${id}`,
-							synthetic: true
-						})
-					)
-				);
+				new Text(
+					this.component,
+					this,
+					this.scope,
+						/** @type {any} */({
+						type: 'Text',
+						data: ` ${id}`,
+						synthetic: true
+					})
+				)
+			);
 			}
 		} else {
 			this.attributes.push(
@@ -1332,7 +1341,7 @@ export default class Element extends Node {
 					this.component,
 					this,
 					this.scope,
-					/** @type {any} */ ({
+					/** @type {any} */({
 						type: 'Attribute',
 						name: 'class',
 						value: [{ type: 'Text', data: id, synthetic: true }]
@@ -1432,7 +1441,7 @@ function get_value_attribute(attributes) {
 			node_value = node;
 		}
 		if (node.type === 'Spread') {
-			walk(/** @type {any} */ (node.expression), {
+			walk(/** @type {any} */(node.expression), {
 				enter(/** @type {import('estree').Node} */ node) {
 					if (node_value) {
 						this.skip();
diff --git a/packages/svelte/test/validator/samples/binding-custom-element/errors.json b/packages/svelte/test/validator/samples/binding-custom-element/errors.json
new file mode 100644
index 000000000000..0637a088a01e
--- /dev/null
+++ b/packages/svelte/test/validator/samples/binding-custom-element/errors.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/packages/svelte/test/validator/samples/binding-custom-element/input.svelte b/packages/svelte/test/validator/samples/binding-custom-element/input.svelte
new file mode 100644
index 000000000000..c30e24d234d0
--- /dev/null
+++ b/packages/svelte/test/validator/samples/binding-custom-element/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let value;
+</script>
+
+<my-element bind:value></my-element>
\ No newline at end of file
diff --git a/packages/svelte/test/validator/samples/binding-custom-element/warnings.json b/packages/svelte/test/validator/samples/binding-custom-element/warnings.json
new file mode 100644
index 000000000000..bb74219ec73d
--- /dev/null
+++ b/packages/svelte/test/validator/samples/binding-custom-element/warnings.json
@@ -0,0 +1,14 @@
+[
+    {
+        "code": "binding-custom-element",
+        "message": "Binding on custom element <my-element> is not strongly checked. You need to ensure 'value' is a valid property.",
+        "start": {
+            "line": 5,
+            "column": 12
+        },
+        "end": {
+            "line": 5,
+            "column": 22
+        }
+    }
+]
\ No newline at end of file