Динамическая метка «для» атрибута в Polymer

Question

Я пытаюсь создать пользовательский шаблон для радио-кнопки в Polymer, чтобы ссылаться как таковой:

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

Шаблон сам по себе выглядит следующим образом:

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

не только нажатия на соответствующей этикетке не установите флажок, то для атрибута не появляются даже в Chrome Dev Tools:

Из моих исследований это, похоже, связано с Shadow DOMs/data-binding в Polymer 1?

Любая помощь была бы высоко оценена!

Answer 1

Из скриншота веб-инспектора Я предполагаю, что вы используете Shady DOM, а не Shadow DOM (нет # тени-корня)?

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

Я использовал id$= и for$=, но фактическая атр является test (для тестирования :)). Вы должны изменить id на какое-то другое имя attr при вызове <radio-button>, поскольку он может быть использован для чего-то другого и, возможно, с помощью некоторой внутренней логики для генерации значений в шаблоне полимера заглушает необходимость иметь его вообще.

Посмотрите на data binding на сайте полимеров; чтобы быть точным attribute vs property binding

radio-button код, который я использовал, чтобы быть более точным:

<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> 

Дайте ему идти.

Cheers/G.