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>
, but the actual attr
(for testing :)). You should change
attr to some other name when called
, 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.
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