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