material-design-lite: problems with MDL and polyfilled CustomEvent on IE11

MDL version: 1.1.3 Browser: Internet Explorer Browser version: 11 Operating system: Windows Operating system version: 10 CodePen: http://codepen.io/anon/pen/ZWrKjX?fork=xGWgXa (use this in IE11 or Edge)

What steps will reproduce the problem:

1. use a CustomEvent polyfill (for example the one from MDN)
2. create some content with MDL components 😄
3. (optionally) watch your console

What is the expected result? MDL is initialized on page load “automatically” or by upgrading elements manually.

What happens instead of that? The CSS is applied but components do not get upgraded. The debug console shows an error: “Object doesn’t support this action”

---

I am using MDL 1.1.3 in an environment which uses a polyfill for CustomEvent. When I run my app with IE11 and using componentHandler.upgradeElement I’m getting the following error:

TypeError: Object doesn't support this action.
  at upgradeElementInternal (Unknown script code:96:13)

I could track it down to this part of componentHandler:

if ('CustomEvent' in window && typeof window.CustomEvent === 'function') {
  ev = new Event('mdl-componentupgraded', {
    'bubbles': true, 'cancelable': false
  });
}

The check for CustomEvent does not fail (basically a false positive) and the componentHandler tries to create an Event by calling the new Event(...) constructor which apparently isn’t accessible with IE11. Doing a manual new Event('test', { bubbles: true }); leads to the exact same error mentioned above.

I have read in another issue that new Event() is used to stay compatible with IE10, so this may not be a bug but intentional.

Suggested fix: use CustomEvent to raise events on upgrading components instead of Event which is not usable in IE11/Edge.