Polymer 中的动态标签 "for" 属性

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>

不仅点击相应的标签而不是 select 复选框，for 属性甚至没有出现在 Chrome 开发工具中：

根据我的研究，这似乎与 Polymer 1 中的 Shadow DOMs/data-binding 有关？

如有任何帮助，我们将不胜感激！

Answer 1

根据网络检查器屏幕截图，我假设您使用的是 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$=，但实际属性是 test（用于测试:)）。您应该在调用 <radio-button> 时将 id 更改为其他属性名称，因为它可能用于其他用途，并且可能使用某些内部逻辑在聚合物模板中生成值会消除将其置于全部.

看看data binding on polymer-project site; to be exact 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.

Polymer 中的动态标签 "for" 属性

Dynamic label "for" attribute in Polymer

html

web-component

shadow-dom

polymer

polymer-1.0