Polymer, IE11 dom-repeat no rendering option tags

Question

I'm having issues specifically with IE11. This code works fine in Chrome/Firefox/Edge. I don't see what I am doing that would cause this to not work.

Here is the part of my polymer element's shadow dom that is breaking:

  <template is="dom-if" if="[[showSelect]]]">
    <select value="{{selectValue::change}}">
      <option value="0" selected$="{{matchesDefault(0)}}">All</option>
      <template is="dom-repeat" items="{{excludeNumbers}}" as="number">
        <option value="[[number]]" selected$="[[isExclude(number)]]">Skip [[number]]s</option>
      </template>
    </select>
  </template>

What I'm attempting to do and is working in Chrome/FF/Edge but not IE11:

• If is set, show the shadow dom <select>.
• Bind this.selectValue to update when the dropdown is changed.
• Loop through this.excludeNumbers and write them as <option> nested inside of the <select>, selecting them if they are

What I've tested so far:

• Removing all attributes from the <option> tags
  • Result: No change, still do not render
• Removing the default <option value="0" selected$="{{matchesDefault(0)}}">All</option> from the markup
  • Result: No change, still do not render
• Moving the <template is="dom-repeat"> markup outside of the <select>, just under the opening <template> tag that checks is [[showSelect]] is set & changing them from <option> to <span> tags.
  • Result: Successfully writes span tags
• Running polymer build and testing IE10 on the built code
  • Result: No change

Does anyone see what I have wrong? Any ideas on what I can test?

Any ideas are appreciated

Answer 1

It is a known issue, tables and selects do not work with dome-repeat in IE11 There is an issue for this opened in Github here with no working solution

One solution is to use a custom element, maybe something like paper-dropdown-menu