Polymer custom element containing table cells?

Question

I am trying to create a custom element with Polymer that contains a few table cells. I want to include it in a table row. The problem I am having is that the custom element tags break the format of the table (because the table row expects to contain table cell elements directly rather than via a sub-element).

Is there some way of doing what I want?

Answer 1

I solved this issue by simply removing the <tr> from the equation.

<table>
  <thead>
    <th>Name</th>
    <th>Date</th>
  </thead>
  <tbody>
    <template is="dom-repeat" items="[[items]]">
      <custom-component item="{{item}}"></custom-component>
    </template>
  </tbody>
</table>

The custom component's template looks like this:

<template>
  <td>{{item.name}}</td>
  <td>{{item.date}}</td>
</template>

And then I added styling for the custom-component in the component using it, saying:

custom-component {
  display: table-row;
}