javascript - 为 Polymer 自定义元素使用 native 节点名称？

Question

我有一个自定义的 Polymer 元素，它包含一个项目数组，将它们呈现为一个表格。我想添加一个自定义元素来处理表中每一行的呈现，但在 <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(使用 display:table、display:table-row、display:table-cell 等的 CSS)而不是 table/tr/td 元素。

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

Answer 1

根据您的示例，假设 <custom-row>是扩展 <tr> 的自定义元素，您正在尝试嵌套 <tr>作为一个习俗的 child 。解析器会将其丢弃。

相反，使用类型扩展自定义元素(is="")形式并扩展<tr> :

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

这对我有用:http://jsbin.com/nobaqeso/1/edit