Polymer 2.x-Code funktioniert in Jsbin aber nicht in Codepen, Plunker oder Jsfiddle

Der folgende Code funktioniert einwandfrei in this jsbin, aber es funktioniert nicht in this codepen, this plunker oder this jsfiddle.Polymer 2.x-Code funktioniert in Jsbin aber nicht in Codepen, Plunker oder Jsfiddle

Warum nicht? Wie kann ich es an den drei Orten zum Laufen bringen, wo es nicht funktioniert?

http://jsbin.com/yudavucola/1/edit?html,console,output

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 

    <base href="http://polygit.org/polymer+:master/components/"> 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="polymer/polymer-element.html"> 
    <link rel="import" href="paper-dialog/paper-dialog.html"> 

    <!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it --> 
    <link rel="import" href="neon-animation/web-animations.html"> 
    <link rel="import" href="neon-animation/animations/scale-up-animation.html"> 
    <link rel="import" href="neon-animation/animations/fade-out-animation.html"> 

</head> 
<body> 
    <dom-module id="my-el"> 
    <template> 
     <button on-click="open">Open Dialog</button> 
     <paper-dialog 
     id="dialog" 
     entry-animation="scale-up-animation" 
     exit-animation="fade-out-animation" 
     modal 
     > 
     <h2>Header</h2> 
     <div>Dialog body</div> 
     </paper-dialog> 
    </template> 
    <script> 
     class MyEl extends Polymer.Element { 
     static get is() { return 'my-el' } 

    constructor() { 
     super(); 
     } 

     open() { 
      console.log('opening...'); 
      this.$.dialog.open(); 
      console.log('opened!'); 
     } 

     } 

     customElements.define(MyEl.is, MyEl); 
    </script> 
    </dom-module> 

    <my-el></my-el> 
</body> 
</html>

Quelle

2017-09-04 Mowzer

Da jede andere Website außer jsbin ist die sichere Version von HTTP heißen HTTPS verwenden, die Anforderung, den Inhalt von der Quelle zu bekommen http://polygit.org/polymer+:master/components/ blockiert. Also, sichere Verbindung verwenden und es wird in jeder anderen Site funktionieren.

Sie können die Konsole für weitere Informationen überprüfen.

Quelle

2017-09-05 02:03:00 Ofisora

Ändern <base> Tag href Attribut von http://polygit.org/... zu //polygit.org/.... Dies normalisiert den Import so, dass er sowohl in http als auch in https Umgebungen funktioniert.

Hier arbeiten Beispiele in allen Repositories: JsBin, Codepen, Plunker und JsFiddle.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 

    <base href="//polygit.org/polymer+:master/components/"> 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
    <link rel="import" href="polymer/polymer-element.html"> 
    <link rel="import" href="paper-dialog/paper-dialog.html"> 

    <!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it --> 
    <link rel="import" href="neon-animation/web-animations.html"> 
    <link rel="import" href="neon-animation/animations/scale-up-animation.html"> 
    <link rel="import" href="neon-animation/animations/fade-out-animation.html"> 

</head> 
<body> 
    <dom-module id="my-el"> 
    <template> 
     <button on-click="open">Open Dialog</button> 
     <paper-dialog 
     id="dialog" 
     entry-animation="scale-up-animation" 
     exit-animation="fade-out-animation" 
     modal 
     > 
     <h2>Header</h2> 
     <div>Dialog body</div> 
     </paper-dialog> 
    </template> 
    <script> 
     class MyEl extends Polymer.Element { 
     static get is() { return 'my-el' } 

    constructor() { 
     super(); 
     } 

     open() { 
      console.log('opening...'); 
      this.$.dialog.open(); 
      console.log('opened!'); 
     } 

     } 

     customElements.define(MyEl.is, MyEl); 
    </script> 
    </dom-module> 

    <my-el></my-el> 
</body> 
</html>

bearbeiten

Beachten Sie, dass für eine bestimmte Version von Polymer, Sie

<base href="//polygit.org/polymer2.0+:master/components/">

oder

<base href="//polygit.org/polymer1.0+:master/components/">

usw.

verwenden können

Quelle

2017-09-05 07:55:51 Mowzer

Polymer 2.x-Code funktioniert in Jsbin aber nicht in Codepen, Plunker oder Jsfiddle

Antwort

Verwandte Themen