Attributes with a hyphen do not reflect to LitElement property

<a-thing with-property="Foo"></a-thing> with a property withProperty within class AThing extends LitElement does not reflect in the withProperty property.

Expected: withProperty has value "Foo"

Actual: withProperty is null

Glitch: Code, Demo

[leonheess]

We elected not to support this automatic dash to camel case conversion from PolymerElement in LitElement because it was generally non-platform-y. Instead, lowercase attributes are automatically mapped to the correctly cased property which is what the platform itself does for properties like tabIndex.

This behavior can be customized by importing camelToDashCase from Polymer implementing

static attributeNameForProperty(property) {
  return camelToDashCase(property);
}

Can this decision still be challenged? This fundamentally limits the cross-compatibility with other frameworks like Vue.js which is kind of a bad thing for a web-component-focused framework, isn’t it?

[kenchris]

LitElement is about as vanilla as it gets, it is not trying to invent anything already present in the platform. It just adds a few things missing. There are even spec proposals like Template Instantiation, making lit-html even smaller - and making all of this just a tiny bit of convenience.

This is the future of Polymer as well, removing as much of the custom stuff as possible, and what turned out to not make sense, and just use the platform as much as possible, now that it is actually possible to do so.

Expect a lot of the “magic” from Polymer not to be present in LitElement, like reflection, computed values etc