Polymer custom element containing table cells?

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?

Solution

This is not supported because the browser don't support it. What you can do is to not use table and instead use CSS to display you elements like table-cell,

display: table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;

If you want to make your custom element to just wrap a few <td></td> (but not all) of a <tr> then this might work for you

<dom-module is="custom-tr">
  <template>
    <style>
      :host { display: table-row; }
      .td, ::content .td { display: table-cell; }
    <div class="td">a</div>
    <div class="td">b</div>
    <content></content>
    <div class="td">e</div>
    <div class="td">f</div>
  </template>
</dom-module>

and then use it like

<div class="table"> <!-- `.table` needs styling from outside -->
  <some-td-wrapper>
    <div class="td">c</div>
    <div class="td">d</div>
  </some-td-wrapper>
</div>