动态标签＆＃34; for＆＃34; 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>

点击相应标签不会选中复选框，for属性甚至不会出现在Chrome开发工具中：

根据我的研究，这似乎与Polymer 1中的Shadow DOMs /数据绑定有关？

非常感谢任何帮助！

Answer 1

从Web检查器截图我假设您使用的是Shady DOM而不是Shadow DOM（没有＃shadow-root）？

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

我使用了id$=和for$=，但实际的attr是test（用于测试:)）。在调用id时，您应该将<radio-button>更改为其他attr名称，因为它可能用于其他内容，并且可能使用某些内部逻辑来生成聚合物模板中的值，这样就无需将其设置为所有

在聚合物项目网站上查看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>

试一试。

干杯/ G.