Using a dom-repeat in a <table> or <select> breaks on IE

Question

When working with tables and select dropdowns in Polymer I have found that I can use a dom-repeat template inside of a <table>/<select> to print out an array of values for the tag. This works flawlessly on all Browsers except for of course Internet Explorer.

Example:

<select>
  <template is="dom-repeat" items="{{listOfItems}}" as="item">
    <option value="{{item.value}}">{{item.name}}</option>
  </template>
</select>

Another Example straight from the polymer elements catalog:

<table id="element-table">
  ...
  <tbody>
    <template is="dom-repeat" items="[[elements]]">
      <tr on-tap="nav" target$="[[item.name]]">
        <td class="name" width="100">[[item.name]]</td>
        <td class="description relative">[[item.description]]</td>
        <td class="tags">
          <template is="dom-repeat" items="[[item.tags]]">
            <tag-link name="[[item]]" on-tap="tagTapped"></tag-link><span>,</span>
          </template>
        </td>
        <td class="actions">
          <element-action-menu element="[[item.name]]" icons-only=""></element-action-menu>
        </td>
      </tr>
    </template>
  </tbody>
</table>

Is this just not supported in Internet explorer right now (I noticed on the Polymer site that they do not allow IE browsers to visit the table page) or is there a way to do this?

Answer 1

IE doesn't have native support for the <template> tag and has the additional quirk that it does weird things to non-<tr>, <thead>, or <tbody> tags inside a table and non <option> tags inside a select.

Basically the current state is that putting a dom-repeat or similar inside a template just blows up the parser in IE and may actually leak out and break other parts of an application beyond just the table rendering.

The Polymer team is definitely aware of this issue but (as of 2016-04-01) there are no official workarounds.

You could try to fake a table using CSS display: table. It's an ugly hack, but IE isn't giving much of an option.