Can't use data binding inside <table> tag, with IE 10 (other browsers OK)

Question

I'm trying to create a data table component using Polymer 1.0. I'm facing a strange issue that is reproduced only on IE10, (verified Chrome and Firefox are OK).

The following code, fails to display the content of the bound data:

<table>
      <tr>
        <template is="dom-repeat" items="{{columns}}" as="col" index-as="colIndex">
          <th>
            <div>++</div>
            <div>{{colIndex}}</div>
            <div>--</div>
            <div>{{col.title}}</div>
            <div>++</div>
          </th>
        </template>
      </tr>
 </table>

Checking the result with the DOM explorer in IE10, I can see that no the data binding is not replacing {{colIndex}} and {{col.title}}.

If I do remove the <table> and </table> tags, the data binding is OK. Anybody faced the same issue ? Any workaround to mention ?

Craig Day Craig Day · Accepted Answer · 2015-10-18T08:59:19

Yes, surprise, surprise, its an IE rendering bug. IE is extremely anal about the types of elements that can be used inside table elements, and Polymer leaves tags inside the DOM. is also broken.

Heres the link to the Github issue:

https://github.com/Polymer/polymer/issues/1567

We discovered this quite late in a project. The solution was to replace all tables and selects with custom based constructs. There is a link to get you started down this unfortunate path in the issue comments.

Can't use data binding inside <table> tag, with IE 10 (other browsers OK)

1 Answers