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

Question

我有一个自定义 Polymer 元素，其中包含一组项目，将它们呈现为表格。我想添加一个自定义元素来处理表格中每一行的呈现，但是在 HTML 中通常会添加 <tr> 的地方不允许使用自定义元素。

允许：

<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。

我正在通过在单个自定义元素中呈现整个表格或使用 divs（使用 CSS 用于 display:table、display:table-row、display:table-cell 等）而不是 table/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