Einfaches Polymerelement kann aufgrund von Polymercodefehlern nicht im IE geladen werden

Ich versuche, ein grundlegendes Polymerelement in IE 11 zu verwenden, aber ich erhalte Fehler, die darauf zurückzuführen sind, dass der Polymercode nicht korrekt geladen wird oder Syntax aufweist Fehler.Einfaches Polymerelement kann aufgrund von Polymercodefehlern nicht im IE geladen werden

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>

der Konsole Fehler zeigen als "Expected ':'" und „Syntaxfehler "in Dateien wie /polymer/lib/utils/case-map.html.js und/polymer/lib/elements /dom-module.html.js.

Hat jemand anderes dies in IE 11 funktioniert?

Quelle

2017-06-20 bgoerdt

Aus meiner Erfahrung ist es eine Schande, dass Polymer IE11 wegen der Tonnen von Problemen, die diesem Browser folgt, unterstützt. Zum Beispiel, wenn Sie beginnen, eine wirklich komplexe Website mit vielen Elementen zu bekommen, IE11 wird aufhören zu laden CSS nach einer Weile und Sie müssen die Seite neu laden. –

IE11 nicht erkennt diese Syntax für Klassen, weil ES6 spec: https://kangax.github.io/compat-table/es6/

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

Es nur mit der ES5 Art und Weise funktioniert, es zu tun:

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

Daher müssen Sie entweder die verwenden Polymer 1.7+ Syntax die ist:

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

oder verwenden Sie Babel als Vorprozessor, um den gesamten ES6-Code auf ES2015 zu übertragen.

Quelle

2017-06-20 17:08:01

Einfaches Polymerelement kann aufgrund von Polymercodefehlern nicht im IE geladen werden

Antwort

Verwandte Themen