Merge pull request #610 from Polymer/attribute-property-refect

Ensure attribute reflected from property is correct

Author: Steve Orvell

CHANGELOG.md

@@ -19,6 +19,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 * `LitElement.renderRoot` is now `public readonly` instead of `protected`.
 
 ### Fixed
+* A reflecting property set immediately after a corresponding attribute
+now reflects properly ([#592](https://github.com/Polymer/lit-element/issues/592)).
 * Properties annotated with the `@query` and `@queryAll` decorators will now
   survive property renaming optimizations when used with tsickle and Closure JS
   Compiler.

src/lib/updating-element.ts

@@ -579,25 +579,29 @@ export abstract class UpdatingElement extends HTMLElement {
    */
   requestUpdate(name?: PropertyKey, oldValue?: unknown) {
     let shouldRequestUpdate = true;
-    // if we have a property key, perform property update steps.
-    if (name !== undefined && !this._changedProperties.has(name)) {
+    // If we have a property key, perform property update steps.
+    if (name !== undefined) {
       const ctor = this.constructor as typeof UpdatingElement;
       const options =
           ctor._classProperties!.get(name) || defaultPropertyDeclaration;
       if (ctor._valueHasChanged(
               this[name as keyof this], oldValue, options.hasChanged)) {
-        // track old value when changing.
-        this._changedProperties.set(name, oldValue);
-        // add to reflecting properties set
+        if (!this._changedProperties.has(name)) {
+          this._changedProperties.set(name, oldValue);
+        }
+        // Add to reflecting properties set.
+        // Note, it's important that every change has a chance to add the
+        // property to `_reflectingProperties`. This ensures setting
+        // attribute + property reflects correctly.
         if (options.reflect === true &&
             !(this._updateState & STATE_IS_REFLECTING_TO_PROPERTY)) {
           if (this._reflectingProperties === undefined) {
             this._reflectingProperties = new Map();
           }
           this._reflectingProperties.set(name, options);
         }
-        // abort the request if the property should not be considered changed.
       } else {
+        // Abort the request if the property should not be considered changed.
         shouldRequestUpdate = false;
       }
     }

src/test/lib/updating-element_test.ts

@@ -2219,4 +2219,32 @@ suite('UpdatingElement', () => {
     await a.updateComplete;
     assert.equal(a.updatedCalledCount, 1);
   });
+
+  test('property reflects after setting attribute in same update cycle', async () => {
+    class A extends UpdatingElement {
+
+      foo?: boolean;
+      bar?: string;
+
+      static get properties() {
+        return {
+          foo: {type: Boolean, reflect: true},
+          bar: {type: String, reflect: true}
+        };
+      }
+
+    }
+    customElements.define(generateElementName(), A);
+    const a = new A();
+    container.appendChild(a);
+    a.setAttribute('foo', '');
+    a.removeAttribute('foo');
+    a.foo = true;
+    await a.updateComplete;
+    assert.isTrue(a.hasAttribute('foo'));
+    a.setAttribute('bar', 'hi');
+    a.bar = 'yo';
+    await a.updateComplete;
+    assert.equal(a.getAttribute('bar'), 'yo');
+  });
 });