fix(elements): capture input properties set before upgrading the element (#36114)

Previously, if an element started out as a regular `HTMLElement` (not a
Custom Element) and was later upgraded to a Custom Element, any
properties corresponding to component inputs that were set on the
element before upgrading it would not be captured correctly and thus not
reflected on the instantiated component.

This commit fixes it by ensuring that such properties are captured
correctly.

Jira issue: [FW-2006](https://angular-team.atlassian.net/browse/FW-2006)

Fixes #30848
Closes #31416

PR Close #36114

packages/elements/test/create-custom-element_spec.ts

@@ -22,12 +22,16 @@ type WithFooBar = {
 
 if (browserDetection.supportsCustomElements) {
   describe('createCustomElement', () => {
+    let selectorUid = 0;
+    let testContainer: HTMLDivElement;
     let NgElementCtor: NgElementConstructor<WithFooBar>;
     let strategy: TestStrategy;
     let strategyFactory: TestStrategyFactory;
     let injector: Injector;
 
     beforeAll(done => {
+      testContainer = document.createElement('div');
+      document.body.appendChild(testContainer);
       destroyPlatform();
       platformBrowserDynamic()
           .bootstrapModule(TestModule)
@@ -36,18 +40,23 @@ if (browserDetection.supportsCustomElements) {
             strategyFactory = new TestStrategyFactory();
             strategy = strategyFactory.testStrategy;
 
-            NgElementCtor = createCustomElement(TestComponent, {injector, strategyFactory});
+            const {selector, ElementCtor} = createTestCustomElement();
+            NgElementCtor = ElementCtor;
 
             // The `@webcomponents/custom-elements/src/native-shim.js` polyfill allows us to create
             // new instances of the NgElement which extends HTMLElement, as long as we define it.
-            customElements.define('test-element', NgElementCtor);
+            customElements.define(selector, NgElementCtor);
           })
           .then(done, done.fail);
     });
 
     afterEach(() => strategy.reset());
 
-    afterAll(() => destroyPlatform());
+    afterAll(() => {
+      destroyPlatform();
+      document.body.removeChild(testContainer);
+      (testContainer as any) = null;
+    });
 
     it('should use a default strategy for converting component inputs', () => {
       expect(NgElementCtor.observedAttributes).toEqual(['foo-foo', 'barbar']);
@@ -113,7 +122,90 @@ if (browserDetection.supportsCustomElements) {
          expect(strategy.inputs.get('barBar')).toBe('barBar-value');
        });
 
+    it('should capture properties set before upgrading the element', () => {
+      // Create a regular element and set properties on it.
+      const {selector, ElementCtor} = createTestCustomElement();
+      const element = Object.assign(document.createElement(selector), {
+        fooFoo: 'foo-prop-value',
+        barBar: 'bar-prop-value',
+      });
+      expect(element.fooFoo).toBe('foo-prop-value');
+      expect(element.barBar).toBe('bar-prop-value');
+
+      // Upgrade the element to a Custom Element and insert it into the DOM.
+      customElements.define(selector, ElementCtor);
+      testContainer.appendChild(element);
+      expect(element.fooFoo).toBe('foo-prop-value');
+      expect(element.barBar).toBe('bar-prop-value');
+
+      expect(strategy.inputs.get('fooFoo')).toBe('foo-prop-value');
+      expect(strategy.inputs.get('barBar')).toBe('bar-prop-value');
+    });
+
+    it('should capture properties set after upgrading the element but before inserting it into the DOM',
+       () => {
+         // Create a regular element and set properties on it.
+         const {selector, ElementCtor} = createTestCustomElement();
+         const element = Object.assign(document.createElement(selector), {
+           fooFoo: 'foo-prop-value',
+           barBar: 'bar-prop-value',
+         });
+         expect(element.fooFoo).toBe('foo-prop-value');
+         expect(element.barBar).toBe('bar-prop-value');
+
+         // Upgrade the element to a Custom Element (without inserting it into the DOM) and update a
+         // property.
+         customElements.define(selector, ElementCtor);
+         customElements.upgrade(element);
+         element.barBar = 'bar-prop-value-2';
+         expect(element.fooFoo).toBe('foo-prop-value');
+         expect(element.barBar).toBe('bar-prop-value-2');
+
+         // Insert the element into the DOM.
+         testContainer.appendChild(element);
+         expect(element.fooFoo).toBe('foo-prop-value');
+         expect(element.barBar).toBe('bar-prop-value-2');
+
+         expect(strategy.inputs.get('fooFoo')).toBe('foo-prop-value');
+         expect(strategy.inputs.get('barBar')).toBe('bar-prop-value-2');
+       });
+
+    it('should allow overwriting properties with attributes after upgrading the element but before inserting it into the DOM',
+       () => {
+         // Create a regular element and set properties on it.
+         const {selector, ElementCtor} = createTestCustomElement();
+         const element = Object.assign(document.createElement(selector), {
+           fooFoo: 'foo-prop-value',
+           barBar: 'bar-prop-value',
+         });
+         expect(element.fooFoo).toBe('foo-prop-value');
+         expect(element.barBar).toBe('bar-prop-value');
+
+         // Upgrade the element to a Custom Element (without inserting it into the DOM) and set an
+         // attribute.
+         customElements.define(selector, ElementCtor);
+         customElements.upgrade(element);
+         element.setAttribute('barbar', 'bar-attr-value');
+         expect(element.fooFoo).toBe('foo-prop-value');
+         expect(element.barBar).toBe('bar-attr-value');
+
+         // Insert the element into the DOM.
+         testContainer.appendChild(element);
+         expect(element.fooFoo).toBe('foo-prop-value');
+         expect(element.barBar).toBe('bar-attr-value');
+
+         expect(strategy.inputs.get('fooFoo')).toBe('foo-prop-value');
+         expect(strategy.inputs.get('barBar')).toBe('bar-attr-value');
+       });
+
     // Helpers
+    function createTestCustomElement() {
+      return {
+        selector: `test-element-${++selectorUid}`,
+        ElementCtor: createCustomElement<WithFooBar>(TestComponent, {injector, strategyFactory}),
+      };
+    }
+
     @Component({
       selector: 'test-component',
       template: 'TestComponent|foo({{ fooFoo }})|bar({{ barBar }})',