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:
<template>
<input type="radio" id="[[id]]" name="[[group]]" value="[[value]]" readonly$="[[readonly]]" disabled$="[[disabled]]" checked$="[[checked]]" />
<label for="[[id]]"><content></content></label>
</template>
Not only does clicking on the corresponding shortcut not select the checkbox, the for attribute doesn't even show up in Chrome Dev Tools:
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
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
radio-button
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.
source to share