Property value incorrectly if using both of static properties() and @property decorator

[gogermany]

Description

Lit-Element handle properties value incorrectly if using both of static properties() and @property decorator for create element extends from abstract class.

I think this problem is related with

• abstract class no need to use @customElement
• use static properties() in abstract class
• use @property in child class

Live Demo

https://stackblitz.com/edit/lit-element-properties-problem?file=my-element.ts

Steps to Reproduce by using TypeScript

1. Create abstract class BaseElement

// not define element @customElement because this is abstract class
abstract class BaseElement extends LitElement {

  public foo = false;
  
  // (I don't use  @property because I have to import properties from share properties)
  static get properties() {
    return { 
      foo: { type: Boolean, reflect: true }
    };
  }

  render(){
    return html`<p>${this.foo}</p>`;
  }
}

2. Create MyElement

@customElement('my-element')
export class MyElement extends BaseElement {
  /**
   * Create new property with @property
   * Using this make a problem with static properties().
   * Remove this property and reload by click refresh button to get correct value
   */
  @property() bar = 'bar';
}

3. Use element and set foo attribute is true

<my-element foo></my-element>

Expected Results

foo property value and element render should be true

Actual Results

foo property value and element render is false

Browsers Affected

• [x] Chrome
• [x] Firefox
• [x] Edge
• [x] Safari 13
• [x] IE 11

Versions

• lit-element: v2.2.1
• webcomponents: v2.4.1

[gregorymachon]

+1

[kevinpschaaf]

Status: This has been fixed in the lit-next branch, but is still an open bug on master (lit-element 2.x).