robwormald · Jul 4, 2019 · gkalpak · Jul 4, 2019
diff --git a/packages/elements/src/component-factory-strategy.ts b/packages/elements/src/component-factory-strategy.ts
@@ -152,7 +152,7 @@ export class ComponentNgElementStrategy implements NgElementStrategy {
     this.implementsOnChanges =
         isFunction((this.componentRef.instance as any as OnChanges).ngOnChanges);
 
-    this.initializeInputs();
+    this.initializeInputs(element);
     this.initializeOutputs();
 
     this.detectChanges();
@@ -162,9 +162,16 @@ export class ComponentNgElementStrategy implements NgElementStrategy {
   }
 
   /** Set any stored initial inputs on the component's properties. */
-  protected initializeInputs(): void {
+  protected initializeInputs(element?: HTMLElement): void {
     this.componentFactory.inputs.forEach(({propName}) => {
-      const initialValue = this.initialInputValues.get(propName);
+      let initialValue;
+      // Remove values set before upgrade to unshadow setter/getter
+      if(element && element.hasOwnProperty(propName)){
+        initialValue = (element as {})[propName as keyof {}];
+        delete (element as {})[propName as keyof {}];
+        this.initialInputValues.set(propName, initialValue);
+      }
+      initialValue = this.initialInputValues.get(propName);
       if (initialValue) {
         this.setInputValue(propName, initialValue);
       } else {

diff --git a/packages/elements/test/create-custom-element_spec.ts b/packages/elements/test/create-custom-element_spec.ts
@@ -12,7 +12,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
 import {Subject} from 'rxjs';
 
-import {NgElementConstructor, createCustomElement} from '../src/create-custom-element';
+import {NgElementConstructor, createCustomElement, NgElement} from '../src/create-custom-element';
 import {NgElementStrategy, NgElementStrategyEvent, NgElementStrategyFactory} from '../src/element-strategy';
 
 type WithFooBar = {
@@ -94,6 +94,17 @@ if (browserDetection.supportsCustomElements) {
       expect(strategy.inputs.get('fooFoo')).toBe('foo-foo-value');
       expect(strategy.inputs.get('barBar')).toBe('barBar-value');
     });
+
+    it('should properly handle initial values on the element', () => {
+      const element = document.createElement('lazy-test-element') as NgElement & WithFooBar;
+      element.fooFoo = 'foo-foo-value';
+      expect(element.hasOwnProperty('fooFoo')).toBe(true);
+      customElements.define('lazy-test-element', createCustomElement(TestComponent, {injector}));
+      document.body.appendChild(element);
+      expect(element.hasOwnProperty('fooFoo')).toBe(false);
+      expect(element.fooFoo).toBe('foo-foo-value');
+
+    });
   });
 }