🐛 Allow to use bind:property on custom elements

packages/svelte/src/compiler/compile/compiler_warnings.js

@@ -306,5 +306,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.`
+	})
 };

packages/svelte/src/compiler/compile/nodes/Element.js

@@ -1100,7 +1100,12 @@ 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('-') && name !== 'this') {
+				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,

packages/svelte/test/validator/samples/binding-custom-element/errors.json

@@ -0,0 +1 @@
+[]

packages/svelte/test/validator/samples/binding-custom-element/input.svelte

@@ -0,0 +1,6 @@
+<script>
+	let myValue;
+	let myElement;
+</script>
+
+<my-element bind:value={myValue} bind:this={myElement}></my-element>

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 checked. You need to ensure 'value' is a valid property.",
+		"start": {
+			"line": 6,
+			"column": 12
+		},
+		"end": {
+			"line": 6,
+			"column": 32
+		}
+	}
+]