CODEWITHSUNDEEP
polymer
bgoerdt
bgoerdt

Reputation: 162

Simple Polymer element failing to load in IE due to Polymer code errors

I am trying to get a basic Polymer element to work in IE 11, but I am getting errors it looks like due to the Polymer code not loading correctly or having syntax errors.

custom-element.html

<link rel="import" href="/node_modules/@polymer/polymer/polymer-element.html">

<script>
  class CustomElement extends Polymer.Element {
    static get is() {
      return "custom-element";
    }
    constructor() {
      super();
      this.textContent = "I'm a custom-element.";
    }
  }
  customElements.define(CustomElement.is, CustomElement);
</script>

index.html 

<!DOCTYPE html>
<html lang="en">

<head>
  <script type="application/javascript" src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="custom-element.html">
</head>

<body>
  <custom-element></custom-element>
</body>

</html>

The console errors show as "Expected ':'" and "Syntax error" in files like /polymer/lib/utils/case-map.html.js and /polymer/lib/elements/dom-module.html.js.

Has anyone else gotten this to work in IE 11?

Upvotes: 0

Views: 446

Answers (1)

AP.
AP.

Reputation: 8921

IE11 does not recognize this syntax for classes because ES6 spec: https://kangax.github.io/compat-table/es6/

class foo {
    static bar() {
       //..code..
    }
}

It only works with the ES5 way of doing it:

var foo = {};
foo.bar = function() {
  // ..code..
}

Therefore you either need to use the Polymer 1.7+ Syntax which is:

Polymer({
  is: 'custom-element',
  ready: function(){this.textContent = "I'm a custom-element."}.
})

or use Babel as a pre-processor, to transpile all your ES6 code to ES2015.

Upvotes: 1

Related Questions