Polymer 2.0 + IE11: Don’t use <dom-bind> in your index.html

Screenshot from IE11

Over the course of the last weeks, we migrated a couple of large applications from Polymer 1 to Polymer 2. Although most of the migration work was rather mechanical, getting the application work with Internet Explorer 11 gave us lots of gray hair.

Our Polymer 2 application worked like a charm in all modern browsers: Chrome, Safari, Edge, Firefox — all good. And then, we got to our beloved Internet Explorer 11.

Before the app even started, IE11 simply throw an error Unable to get property 'localName' of undefined or null reference:

After isolating all possible causes, we finally found the issue! Our index.html embedded the app via <dom-bind> (which worked with Polymer 1):

<body>
<dom-bind>
<template>

<my-app property="[[value]]"></my-app>
</template>
</dom-bind>
</body>

Once this was changed, also IE11 was finally happy:

<body>
<my-app></my-app>
</body>

As we still needed to set certain properties on the <my-app> element, we simply injected those via JavaScript:

<body>
<my-app id="app"></my-app>
</body>
...
const app = document.querySelector('#app');
app.property = 'xyz';

Happy coding!

Want to learn more about Polymer? Have a look to all our Medium posts on Polymer.