[0.8] Binding to "id" is not working

[ngduc]

in Polymer 0.8 RC4,
Binding to "id" (input) and "for" (label) is not working:

Please check the below example: (click HTML tab)
http://howjs.com/sTrT/2

Thanks.

[arthurevans]

Interesting case.

I managed to get this working by using attribute binding for id (id$="{{uuid}}"), and property binding for the for value (html-for="{{uuid}}"). This appears to be contrary to our advice in the docs (in the case of html-for), so I'm going to ask @kevinpschaaf or @sorvell to weigh in on whether this is working as intended.

(See the "Some attributes are special" note in https://www.polymer-project.org/0.8/docs/devguide/data-binding.html#property-binding -- that's the doc that appears to be wrong, because it advises using for$ (which doesn't seem to work) rather than html-for (which does).

I also initialized the value for uuid in the properties object. I'm not sure whether that's required, but it seemed a little cleaner.

Note that binding to id like this appears to prevent you from using this.$ to access local DOM elements, which may be a consideration. Nesting the input inside the label would be a simpler approach
(but may not give you as much flexibility):

    <label>
        <input id="input" type="radio" name="{{name}}" title="{{title}}" value="{{value}}" checked="{{checked}}">
        <content></content>
    </label>

Working version using data binding on id:

http://plnkr.co/edit/MtYDzf6IgI1P4kVULMmZ?p=preview

Using composition instead:

http://plnkr.co/edit/j31xhq802EGT9I0CPqzj?p=preview

(BTW, I'd never tried howjs before. It went crazy when I tried to open devtools, so I moved the sample to Plunker.)

[ngduc]

Thanks arthurevans. That's interesting indeed.

I haven't seen "html-for" before. Is that a Polymer's attribute or HTML's ? I have tried google but couldn't find it online. Could you ping me the Doc for it ?

Anyway, it'd be great to have for$ binding fixed.

[arthurevans]

htmlFor is a standard property on HTMLLabelElement that reflects the for attribute:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement

Because of the way we map attribute names to property names, you can bind the htmlFor property using html-for="{{value}}".

https://www.polymer-project.org/0.8/docs/devguide/properties.html#property-name-mapping

[kevinpschaaf]

Fixed in 12513df.