From 87417e5a7b1bc3c75f50b99550f7cc75a3c93ccc Mon Sep 17 00:00:00 2001
From: Saurav Sahu <mrsauravsahu@outlook.com>
Date: Sat, 30 Jan 2021 00:01:23 +0530
Subject: [PATCH] fix: "foreign" namespace elements should still allow binding
 'this' (#5942)

---
 src/compiler/compile/nodes/Element.ts | 10 ++++++----
 test/validator/index.ts               | 13 +++++++++++++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index 8c5b4cb9f5c4..07f17390182e 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/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`
+				});
+			}
 		});
 	}
 
diff --git a/test/validator/index.ts b/test/validator/index.ts
index 72364ea89a68..e58be87a3ac2 100644
--- a/test/validator/index.ts
+++ b/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'
+			});
+		});
+	});
 });