From 8eccbfd96d78687a8d131ab4b905d808b3277f94 Mon Sep 17 00:00:00 2001
From: Soc Sieng <socsieng@google.com>
Date: Thu, 23 Jul 2020 16:34:12 -0700
Subject: [PATCH] fix: preserve property case for custom elements

Fixes #5184
---
 .../compile/render_dom/wrappers/Element/Attribute.ts | 12 ++++++++----
 test/custom-elements/samples/props/main.svelte       |  2 +-
 test/custom-elements/samples/props/my-widget.svelte  |  6 +++---
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
index ec281648b8..2c4e97cd62 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
@@ -82,10 +82,12 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 		const element = this.parent;
 		const { name, property_name, should_cache, is_indirectly_bound_value } = this;
 
+		const is_custom_element = /-/.test(element.node.name);
+
 		// xlink is a special case... we could maybe extend this to generic
 		// namespaced attributes but I'm not sure that's applicable in
 		// HTML5?
-		const method = /-/.test(element.node.name)
+		const method = is_custom_element
 			? '@set_custom_element_data'
 			: name.slice(0, 6) === 'xlink:'
 				? '@xlink_attr'
@@ -130,10 +132,12 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 				? b`@prop_dev(${element.var}, "${property_name}", ${should_cache ? this.last : value});`
 				: b`${element.var}.${property_name} = ${should_cache ? this.last : value};`;
 		} else {
+			// use this.node.name when the element is a custom element to preserve property case-sensitivity
+			const custom_element_aware_name = is_custom_element ? this.node.name : name;
 			block.chunks.hydrate.push(
-				b`${method}(${element.var}, "${name}", ${init});`
+				b`${method}(${element.var}, "${custom_element_aware_name}", ${init});`
 			);
-			updater = b`${method}(${element.var}, "${name}", ${should_cache ? this.last : value});`;
+			updater = b`${method}(${element.var}, "${custom_element_aware_name}", ${should_cache ? this.last : value});`;
 		}
 
 		if (is_indirectly_bound_value) {
@@ -387,4 +391,4 @@ function is_indirectly_bound_value(attribute: AttributeWrapper) {
 					(binding) =>
 						/checked|group/.test(binding.name)
 				)));
-}
\ No newline at end of file
+}
diff --git a/test/custom-elements/samples/props/main.svelte b/test/custom-elements/samples/props/main.svelte
index 80b483bf6e..836c5c4703 100644
--- a/test/custom-elements/samples/props/main.svelte
+++ b/test/custom-elements/samples/props/main.svelte
@@ -6,4 +6,4 @@
 	export let items = ['a', 'b', 'c'];
 </script>
 
-<my-widget class="foo" {items}/>
+<my-widget class="foo" widgetItems={items}/>
diff --git a/test/custom-elements/samples/props/my-widget.svelte b/test/custom-elements/samples/props/my-widget.svelte
index cf512e0ff8..b224c338d7 100644
--- a/test/custom-elements/samples/props/my-widget.svelte
+++ b/test/custom-elements/samples/props/my-widget.svelte
@@ -1,8 +1,8 @@
 <svelte:options tag="my-widget"/>
 
 <script>
-	export let items = [];
+	export let widgetItems = [];
 </script>
 
-<p>{items.length} items</p>
-<p>{items.join(', ')}</p>
+<p>{widgetItems.length} items</p>
+<p>{widgetItems.join(', ')}</p>