fix: "foreign" namespace elements should still allow binding 'this' (#5942)

Author: mrsauravsahu

src/compiler/compile/nodes/Element.ts

@@ -600,10 +600,12 @@ export default class Element extends Node {
 
 	validate_bindings_foreign() {
 		this.bindings.forEach(binding => {
-			this.component.error(binding, {
-				code: 'invalid-binding',
-				message: `'${binding.name}' is not a valid binding. Foreign elements only support bind:this`
-			});
+			if (binding.name !== 'this') {
+				this.component.error(binding, {
+					code: 'invalid-binding',
+					message: `'${binding.name}' is not a valid binding. Foreign elements only support bind:this`
+				});
+			}
 		});
 	}
 

test/validator/index.ts

@@ -119,4 +119,17 @@ describe('validate', () => {
 			});
 		}, /Invalid namespace 'foriegn' \(did you mean 'foreign'\?\)/);
 	});
+
+	it('does not throw error if \'this\' is bound for foreign element', () => {
+		assert.doesNotThrow(() => {
+			svelte.compile(`
+			<script>
+				let whatever;
+			</script>
+			<div bind:this={whatever} />`, {
+				name: 'test',
+				namespace: 'foreign'
+			});
+		});
+	});
 });