Search code examples
htmlpolymerweb-componentpolymer-1.0shadow-dom

Dynamic label "for" attribute in Polymer

I am attempting to create a custom radio-button template in Polymer, to be referenced as such:

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

The template itself is as follows:

<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 respective label not select the checkbox, the for attribute doesn't even appear in Chrome Dev Tools:

enter image description here

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

Any help would be much appreciated!

Solution

  • From the web inspector screenshot I assume you're using Shady DOM not Shadow DOM (there's no #shadow-root)?

    <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 is test (for testing:)). You should change id to some other attr name when calling <radio-button> as it may be used for something else and maybe using some internal logic to generate the values in the polymer template would mute the need to have it at all.

    Have a look at data binding on polymer-project site; to be exact attribute vs property binding

    radio-button code I've used to be more precise:

    <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 a go.

    Cheers /G.