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

Question

When working with tables and selecting drop-down lists in Polymer, I found that I can use the dom-repeat pattern inside <table> / <select> to print an array of values ​​for the tag. This works flawlessly in all browsers, except, 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 directly from the catalog of polymer elements:

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

It is simply not supported in Internet Explorer right now (I noticed on the Polymer website that they do not allow IE browsers to visit the table page) or is there a way to do this?

Answer 1

IE does not have built-in support for the <template> and has the additional quirk that it does strange things in the <tr> , <thead> or <tbody> inside the table, rather than the <option> tags inside the selected element.

Basically, the current state is that placing a dom-repeat or similar inside the template just explodes the parser in IE and can actually leak out and break other parts of the application beyond just rendering the table.

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

You can try to fake the table using CSS display: table . This is an ugly hack, but IE doesn't offer much choice.