Default STATE values should be preserved when rendering web components.

Fixes #305
metal · Nov 22, 2017 · dcc640b · dcc640b
1 parent 46a2d06
commit dcc640b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/metal-web-component/src/define_web_component.js b/packages/metal-web-component/src/define_web_component.js
@@ -80,9 +80,13 @@ export function defineWebComponent(tagName, Ctor) {
 
 			let opts = {};
 			for (let i = 0, l = observedAttributes.length; i < l; i++) {
-				opts[observedAttributes[i]] = this.deserializeValue_(
+				let deserializedValue = this.deserializeValue_(
 					this.getAttribute(observedAttributes[i])
 				);
+
+				if (deserializedValue) {
+					opts[observedAttributes[i]] = deserializedValue;
+				}
 			}
 			this.component = new Ctor(opts, element);
 			this.componentHasProps = hasProps;

diff --git a/packages/metal-web-component/test/define_web_component.js b/packages/metal-web-component/test/define_web_component.js
@@ -137,6 +137,15 @@ describe('Web components', function() {
 			assert.isUndefined(title.key1);
 			assert.equal(title.key3, 'value3');
 		});
+
+		it('should have the default state value after rendering', function() {
+			const tagName = createWebComponent('custom-test-element-09');
+			el = document.createElement(tagName);
+
+			document.body.appendChild(el);
+
+			assert.equal(el.component.title, 'default title');
+		});
 	});
 
 	describe('Define JSX component', function() {