CODEWITHSUNDEEP
javascripthtmlpolymer
Alf Eaton
Alf Eaton

Reputation: 5463

Use native node name for a Polymer custom element?

I have a custom Polymer element which contains an array of items, rendering them as a table. I'd like to add a custom element that handles the rendering of each row in the table, but the custom element is not allowed in HTML at the point where <tr> would normally be added.

Allowed:

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

Not allowed:

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

I've seen examples of Web Components that use an "is" attribute to extend native elements (e.g. <tr is="custom-row">), but that doesn't seem to be possible in Polymer's template binding.

I'm working around this by either rendering the whole table in a single custom element, or using divs (with CSS for display:table, display:table-row, display:table-cell, etc) rather than table/tr/td elements.

Is it possible to keep using <tr> as the node name for a custom element?

Upvotes: 1

Views: 160

Answers (1)

ebidel
ebidel

Reputation: 24109

From your example, presuming <custom-row> is a custom element extending <tr>, you're trying to nest a <tr> as a child of a custom one. The parser will throw that out.

Instead, use a type extension custom element (the is="") form and extend <tr>:

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

This worked for me: http://jsbin.com/nobaqeso/1/edit

Upvotes: 3

Related Questions