对于Polymer自定义元素使用本地节点名称？

Question

我有一个自定义的聚合物元素，其中包含一个项目的数组，使它们呈现为一个表格。我想添加一个处理表格中每一行渲染的自定义元素，但是在通常要添加<tr>的位置，HTML中不允许使用自定义元素。

允许：

<table> 
<tbody> 
    <tr> 
    <td>Example</td> 
    </tr> 
</tbody> 
</table> 

不允许：

<table> 
<tbody> 
    <custom-row> 
    <tr> 
     <td>Example</td> 
    </tr> 
    </custom-row> 
</tbody> 
</table> 

我见过examples of Web Components that use an "is" attribute to extend native elements（例如<tr is="custom-row">），但that doesn't seem to be possible in Polymer's template binding。

我解决此工作由两种渲染整个表在一个自定义元素，或使用div S（与CSS为display:table，display:table-row，display:table-cell等），而不是表/ TR/td元素。

是否可以继续使用<tr>作为自定义元素的节点名称？

Answer 1

从您的示例中，假设<custom-row>是一个自定义元素，它的范围是<tr>，您试图将<tr>作为自定义元素的子元素嵌套。解析器会抛出它。

相反，使用类型扩展自定义元素（is=""）形式，延长<tr>：

<table> 
<tbody> 
    <tr is="custom-tr"> 
    <td>Example</td> 
    </tr> 
</tbody> 
</table> 

这为我工作：http://jsbin.com/nobaqeso/1/edit