Dynamic label "for" in Polymer

I'm trying to create a custom template for a radio button in Polymer that can be referenced as such:

<radio-button group="Group1" id="A1" checked>Radio Button A1</radio-button>

The template itself looks like this:

    <input type="radio" id="[[id]]" name="[[group]]" value="[[value]]" readonly$="[[readonly]]" disabled$="[[disabled]]" checked$="[[checked]]" />
    <label for="[[id]]"><content></content></label>


Not only does clicking on the corresponding shortcut not select the checkbox, the for attribute doesn't even show up in Chrome Dev Tools:

enter image description here

From my research, does this seem to be related to Shadow DOMs / data binding in Polymer 1?

Any help would be greatly appreciated!


source to share

1 answer

From the web inspector screenshot I am assuming you are using Shady DOM and not Shadow DOM (no # shadow-root there)?

<input type="radio" id$="[[test]]" name="[[group]]" value="[[value]]" readonly$=[[readonly]] disabled$=[[disabled]] checked$=[[checked]]/>
<label for$="[[test]]"><content></content></label>


I've used id$=

and for$=

, but the actual attr test

(for testing :)). You should change id

attr to some other name when called <radio-button>

, as it could be used for something else, and perhaps using some internal logic to generate values ​​in the polymer template would disable the need to have it at all.

Look at the data binding on the polymetallic project website; more precisely attribute vs property binding


the code I used is more accurate:

<radio-button group="gr1" test="a" checked>RB1</radio-button>
<radio-button group="gr1" test="b">RB2</radio-button>
<radio-button group="gr1" test="c">RB3</radio-button>


Give it back.

Greetings / G.



All Articles