[bug] SCRIPT5009: 'Symbol' is undefined' IE11 Transpiled ECMA6 for .. of .. loop throwing 'Symbol Undefined' using webcomponents-lite polyfill in Polymer

[r3h5]

Description

Having an issue with IE11 poly fills and transpilation with ECMA6 for…of … loops in a Polymer Element/ App

class VanElem extends Polymer.Element {
      static get is() { return 'van-elem'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'van-elem'
          },
        };
      }
      ready(){
        super.ready();
        let iterable = [10, 20, 30];

        for (let value of iterable) {
          value += 1;
          alert(value);
        }
      }
    }

The code above is transpiled when the page is served and throws the 'Symbol undefined' error (pictured) in the ready() function in IE11 on Windows 7 when served with polymer serve

'[synthetic:es6/symbol] ' in the webcomponents-lite sourcemap implies that 'Symbol' should be supported in the transpilation.

Per this stack overflow question , the Symbol issue can be solved by importing a babel polyfill in the header:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>

However, Babel shouldn't be necessary if webcomponents-lite is supposed to shim the Symbol object

Also, it would be one thing if it wasn't transpiled and it was throwing an error since IE11 doesn't support ecma6 loops like this. But it is clearly being transpiled and the transpiled code itself is throwing the error.

Attempts to resolve:

1. Including Babel polyfill (successful but not ideal)

2. Wrapping for .. of in webcomponents ready callback (unsuccessful):

window.addEventListener('WebComponentsReady', function(e) {
    let iterable = [5, 22222, 41234];
    for (let value of iterable) {
        value += 1;
        alert(value);
    }
}); 

3. Wrapping the element in a polymer starter app and serving the 'es5-bundled' build (unsuccessful)

Live Demo

https://stellar-summer.glitch.me/
https://github.com/infotechfl/vanilla-app

Steps to Reproduce

Visit here in IE11. The page would display 3 alerts if functioning properly

1. Check the console log. There will be a 'Symbol Undefined Error'
2. Refresh the page with the inspector open and the debugger set to break on unhandled exceptions to get to highest level of the exception.
3. Refresh the page with the inspector open and the debugger set to break on all exceptions. Play through/hit continue twice until you get to the third break to see where the exact line in the transpiled code where 'Symbol' is undefined.

You can inspect the code by visiting https://glitch.com/edit/#!/stellar-summer

Expected Results

No error thrown. 3 Alerts displayed

Actual Results

Errors thrown. No alerts displayed

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• IE 11

Versions

• Polymer: "2.3.1" in glitch link and make workBench live with toollkit #2.6.0 in repo
• webcomponents: Unknonw in glitch link and 1.1.1 in repo

[TimvdLippe]

Closing per webcomponents/webcomponentsjs#910 (comment)