hyphenated attribute names should map to camelCase property names (was: Change watchers do not work for hyphenated attribute names)

[jonrimmer]

If element attribute name contains a hyphen, e.g. paragraph-size, a corresponding change watcher named paragraph-sizeChanged is not called, even if it is placed on the element prototype.

[sjmiles]

The problem here is there is no support for mapping paragraph-size to a property called paragraphSize.

In general this requires polymer to do string processing that we would rather not do, but we may have to in this case.

*Changed facility is a feature of properties and is tangential to the root issue here.

[jmesserly]

fwiw, we have done dash-separated to camelCase conversion in previous iterations of Polymer.dart port (we had no means of reflection at the time, so we needed a dependable 1:1 mapping). While the 1:1 mapping is nice, it did cause some confusion. I think the polymer-js style names are probably better in the long run. Just my $0.02.

[sjmiles]

Seems like maybe I messed up this bug when JonRimmer originally posted it. In #193, Steve said "Additionally, the property cannot be used as a binding value for mdv." Does this limitation have the same root cause as OP's change watcher not being called?

Seems like I caused this question to be mixed this together with the notion of auto-camel casing.

I will do some research and then circle back and hopefully we can make a decision about what to do here.

[sorvell]

Test:

http://jsbin.com/vefot/1/edit

[stevenroose]

No dashes allowed in custom attributes
Polymer used to recognize attributes with dashes like my-name and convert them to match properties where dashes were removed,
and words follow the camelCase style (for example myName). This feature is no longer available. Now simply use the same name
as the property.

Because HTML attributes are case-insensitive, you can also write the name of your property entirely in lowercase. Just be
sure that your custom-elements don’t declare two properties with the same name but different capitalization.

That's what the error messages page from Polymer.dart says (https://www.dartlang.org/polymer/reference/error-messages/).

I know that there probably was a whole discussion about this when Polymer dropped the support for dashed attributes, but I don't seem to be able to find it somewhere.

Dashes are the defacto standard for multi-word HTML tags and attributes. Not allowing them is like not allowing upper case in Java variables.

What was the reason for dropping the support? The mapping of dashed attributes to camelcase attributes sound perfectly fine for me.

[ImanMh]

Yea, many HTML attributes contain dashes in their names so it's very luckily you end up with a code that contains dozens of ] and [ which is really ugly.

[robdodson]

@stevenroose @ImanMh Polymer 0.8 will support dashes for custom attributes. https://github.com/Polymer/polymer/blob/0.8-preview/PRIMER.md#basic-property-binding

In order to bind to camel-case properties of elements, dash-case should be used in the attribute name

Polymer.Dart is a separate project maintained by a different team, I'm not sure why they've decided to drop dashes. @justinfagnani may know more.

[justinfagnani]

No idea. @sigmundch ?

[jmesserly]

polymer.dart is matching 0.5.x behavior here. I'm happy to hear it will be changing in 0.8 :)

[adamsiemion]

Why a web framework built atop on the latest web standards does not support the HTML naming convention (i.d. attribute names with hyphens)? Please, please, please, get it fixed.

[robdodson]

@adko-pl it is fixed in 0.8, please be patient

[tjsavage]

Closing this issue due to age and the release of version 1 release of Polymer - please feel free to re-open if this is incorrect.