Lit-element: Default properties values are not working

[jimsimon]

Description

Default values are not being applied when a property has one specified and its corresponding attribute is not defined.

Live Demo

https://lit-element-example-km85zd.stackblitz.io

Steps to Reproduce

1. Create my-element
2. Define a property with a default value
3. Use the default value in the element's template
4. Append my-element to document.body

Expected Results

The default value should be rendered

Actual Results

The default value is not rendered (nor is it passed to _render in the props object)

Browsers Affected

• [x] Chrome -- other browsers were not tested

Versions

• lit-element: v0.5.2
• webcomponentsjs: v2.0.2
• polymer: v3.0.2

[jsilvermist]

Default values are set in the constructor, not in the properties object.

constructor() {
  super();

  this.mood = 'happy';
}

[jimsimon]

Is this specific to lit-element? The polymer docs suggest otherwise: https://www.polymer-project.org/3.0/docs/devguide/properties

[jsilvermist]

Yes, using Polymer you can set the default value in properties or the constructor, for lit-element it uses the constructor only.

[jimsimon]

Ah okay. Are there any other property restrictions? I feel like I may have missed some documentation somewhere.

[markcellus]

Yeah, observer, readOnly, notify, etc are all not available in a Lit Element. It may be helpful to remember that a Polymer element is not a Lit element and, while they both do support the concept of properties, they are very different classes.

[jimsimon]

That makes sense, I'd just add that it's not super clear from the README and it's easy to make assumptions since this element is part of the Polymer project. Would it make sense to add some sort of feature comparison to PolymerElement in the README?

[myfreeweb]

Looks like another difference is that attributes are not converted to camelCase when mapped to properties...

[hzmnet]

how to solve somehow we want to get values from an element prototype?
when we get value from "litelemnt.prototype.accessKey" the browser gets an error and stops running the code.