Lit-element: lit element does not support properties containing a "-" and mapped to camel case.

[akc42]

It appears that an element created with lit element can no longer have properties that contain a "-" character on the html representation which would (in Polymer 3) be mapped to a camel cased property in the javascript. There is nothing in the documentation that I could find that highlighted this restriction (which is what this issue is about, I am not necessarily suggesting it should change, although it will make my - slow - migration from polymer3 to lit-element that much harder)

I did extensive testing yesterday with an element I had converted to lit-element and which was then sitting in a polymer 3 surround. Both bound properties, and properties that had been provided with a literal value failed.

As soon as I removed the "-" and also avoided the camel case in the property declarations in javascript it all worked.

This is what it looked like in the template of a Polymer 3 element

<pas-route 
  id="diary" 
  pre-route="[[route]]" 
  if-matched="page:diary" 
  match="/:month" 
  route="{{diaryData}}"><pas-route>

Note: I simulate the output "route" property of <pas-route> (ie its not declared in the properties and I manual raise the appropriate route-changed events).

[ernsheong]

This is expected behavior. See https://github.com/Polymer/lit-element/issues/29 for more details and for tips on how to handle this yourself. Particularly, https://github.com/Polymer/lit-element/issues/29#issuecomment-385569692 answers your question.

[akc42]

This issue is about documenting this restriction, not fixing it. I was coming from the Polymer 3 blog which recommends moving over to LitElement because its the long term direction (and I am working on a one man project that I don't think I will complete until late 2019 so I need to be fully aware of that long term), but had not found anything (even searching the issues I hadn't discovered #29) that gave me any heads up about this.

[ghost]

Thanks for raising it @akc42, I'm working on the docs and I'll be sure to include that info.

[kr05]

This. This just resolved an issue I've been struggling with for AT LEAST half of my work day. I could not for the life of me figure out why my element wasn't working...THANK YOU!

On a kind of related side note...maybe it's just my inexperience talking, but this is the third time I've attempted to adopt polymer 3 and lit-html over the course of a couple of months. My previous attempts had ended in failure and forced me to continue using polymer 2 (which I love and have been using since pretty much its release). Every time I tried my very best to transition, and every time I failed to resolve what seemed to be very simple problems. I remember the feeling of success after I realized the reason my code was failing was due to {{}} being replaced by ${}. Simple mistake, and probably one of the few changes that was actually documented somewhere, but nevertheless it stumped me for a good hour or two. My current attempt has fortunately been much smoother, and if I can complete it successfully, I'll be happy to lend a hand and make a primer on lit-element...or alternatively, I can help with the documentation, if that's even a possibility. Anyway, keep up the great work!

[ghost]

@kr05 Thanks for the feedback. AFAIK {{...}} is still two-way binding syntax in Polymer 3 and will remain so. ${} is just a JavaScript expression inside a JavaScript template literal and is not a replacement for data binding syntax.

I'll be including some "lit-element for Polymer users" info in the docs to make it as easy as possible for people like yourself :)

[sorvell]

Just a quick update to this. The API for customizing attributes names will be changed in the next release (currently published as dev). The property options can contain an attribute key. If the value is false, the property is not added to observedAttributes. If true or absent, the lowercased property name is observed (e.g. fooBar becomes foobar). If it's a string, the string value is observed (e.g attribute: foo-bar). It's currently documented in the readme and as @katejeffreys we'll add it to the documentation site that is forthcoming. Example:

```
static get properties() {
return {
fooBar: {attribute: 'foo-bar'}
}
}