Boolean Attribute no longer reflected after adding and removing the attribute

[jvoccia]

Description

Boolean type's "reflect attribute" does not work if you manually setAttribute, and removeAttribute, without setting a default value for the boolean property.

Live Demo

https://stackblitz.com/edit/lit-element-example-wdqbfc?file=index.js

Steps to Reproduce

The attached example shows adding an attribute called "disabled", removing an attribute called "disabled", and then setting the property "disabled" to true.

The result is the disabled property is set to true, but the attribute "disabled" does not appear on the element.

Expected Results

Expected that the attribute "disabled" would appear on the element.

Actual Results

Attribute "disabled" does not appear on the element.

It appears this can be resolved by setting this.disabled = false, in the constructor.
I see that the documentation now has the following comment:
"If you implement a static properties getter, initialize your property values in the element constructor."

Is initializing all property values now required? If so, the warning his helpful, but it might make sense to do a bit more - like explain what happens if you don't heed the warning.

Browsers Affected

• Chrome
• Firefox
• [?] Edge
• [?] Safari 11
• Safari 10
• [?] IE 11

Versions

• lit-element: v2.0.0-rc.2
• webcomponents: v2.2.3

[justinfagnani]

Verified the reproduction

[abraham]

If you select the element in Chrome DevTools and set it to false and then true it will set the attribute again.

$0.disabled = false;
$0.disabled = true;

(This is not a solution, just an observation of the current behaviour.)

[t-soares]

The update method is responsible to reflect property changes to attributes. Changing a property that has reflect equals true will populate the _reflectingProperties to indicate that the changed property must be reflected to its attribute.

There is a logic that prevents the property being changed from being added to the _reflectingProperties, if the property change was caused by an attribute change.

There is also the _changedProperties map that contains the keys for any properties that have changed since the last update cycle.

If the the same property is changed multiple times on the same update cycle, of course its key is added just once _changedProperties map.

The problem occurs when you change an attribute and on the sae update cycle change the property. In this scenario, when you change the attribute then the property is not added to the _reflectingProperties map. iI after changing the attribute, you change the property then the property is already on the _changedProperties map and the logic that adds the property to the _reflectingProperties is not executed in this case.

This leads to the update method to not reflect the property change to the attribute.

I think that the _reflectingProperties must be configured taking into account the how the property was changed on the last time. It the last property changed came from an attribute change it should not reflect, otherwise it should reflect to the attribute.

[Pho3nixHun]

This issue is still present in version 2.2.0.
Boolean properties are not updated when the attributes changed.

https://stackblitz.com/edit/lit-element-example-b8auar