在 <table> 或 <select> 中使用 dom-repeat 在 IE 上中断

Question

在 Polymer 中使用 tables 和 select 下拉菜单时，我发现我可以在 <table>/[= 中使用 dom-repeat 模板16=] 打印出标签值的数组。这在所有浏览器上都能完美运行，当然 Internet Explorer 除外。

示例：

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

直接来自聚合物元件目录的另一个示例：

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

目前 Internet Explorer 是否不支持此功能（我在 Polymer 网站上注意到它们不允许 IE 浏览器访问 table 页面）或者是否有办法做到这一点？

Answer 1

IE 没有对 <template> 标签的原生支持，并且有一个额外的怪癖，它对非 <tr>、<thead> 或 [=13= table 内的 ] 标签和 select.

内的非 <option> 标签

基本上当前的状态是，将 dom-repeat 或类似内容放入模板中只会破坏 IE 中的解析器，实际上可能会泄漏并破坏应用程序的其他部分，而不仅仅是 table渲染。

Polymer 团队 definitely aware of this issue 但（截至 2016-04-01）没有官方解决方法。

您可以尝试使用 CSS display: table 伪造 table。这是一个丑陋的 hack，但 IE 并没有提供太多选择。

在 <table> 或 <select> 中使用 dom-repeat 在 IE 上中断

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

internet-explorer

web-component

internet-explorer-11

polymer