Fixes #965

It is now possible to set a computed reflecting property in another property's setter as long as `requestUpdate` is called before setting the computed property.

Note, this does require a slightly user code modification to address #965 but it addresses the use case without degrading performance by adding per-property tracking (which is the other alternative).

Author: Steven Orvell

src/lib/updating-element.ts

@@ -657,6 +657,8 @@ export abstract class UpdatingElement extends HTMLElement {
     let shouldRequestUpdate = true;
     // If we have a property key, perform property update steps.
     if (name !== undefined) {
+      const isReflectingToProperty = this._updateState & STATE_IS_REFLECTING_TO_PROPERTY;
+      this._updateState = this._updateState & ~STATE_IS_REFLECTING_TO_PROPERTY;
       const ctor = this.constructor as typeof UpdatingElement;
       const options = ctor.getPropertyOptions(name);
       if (ctor._valueHasChanged(
@@ -668,8 +670,7 @@ export abstract class UpdatingElement extends HTMLElement {
         // 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 (options.reflect === true && !isReflectingToProperty) {
           if (this._reflectingProperties === undefined) {
             this._reflectingProperties = new Map();
           }

src/test/lib/updating-element_test.ts

@@ -460,6 +460,55 @@ suite('UpdatingElement', () => {
         assert.equal(el.getAttribute('obj'), '{"obj":3}');
       });
 
+
+  test('set an attribute that reflects to a property which has a setter that computes another reflecting property', async () => {
+    class E extends UpdatingElement {
+      static get properties() {
+        return {
+          a: {type: Boolean},
+          b: {type: Number, reflect: true}
+        };
+      }
+
+      _a: boolean;
+      b: number;
+
+      constructor() {
+        super();
+        this._a = false;
+        this.b = 0;
+      }
+
+      get a() {
+        return this._a;
+      }
+
+      set a(value: boolean) {
+        const oldValue = this.a;
+        this._a = value;
+        this.requestUpdate('a', oldValue);
+        this.b += 1;
+      }
+    }
+    const name = generateElementName();
+    customElements.define(name, E);
+    const el = new E();
+    container.appendChild(el);
+    await el.updateComplete;
+    assert.equal(el.getAttribute('b'), '0');
+    el.a = true;
+    await el.updateComplete;
+    assert.equal(el.getAttribute('b'), '1');
+    el.a = false;
+    el.a = true;
+    el.a = false;
+    await el.updateComplete;
+    assert.equal(el.getAttribute('b'), '4');
+    el.setAttribute('a', '');
+    await el.updateComplete;
+    assert.equal(el.getAttribute('b'), '5');
+  });
+
   test('property options via decorator', async () => {
     const hasChanged = (value: any, old: any) =>
         old === undefined || value > old;