polymère code 2.x fonctionne en jsbin mais pas dans codepen, plunker ou jsFiddle

Le code ci-dessous fonctionne correctement dans this jsbin mais il ne fonctionne pas dans les deux this codepen, this plunker ou this jsfiddle.polymère code 2.x fonctionne en jsbin mais pas dans codepen, plunker ou jsFiddle

Pourquoi pas? Comment puis-je le faire fonctionner dans les trois endroits où il ne fonctionne pas?

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>

Source

2017-09-04 Mowzer

Comme tous les autres sites autres que jsbin utilise la version sécurisée de HTTP à savoir HTTPS, la demande pour obtenir le contenu de la source http://polygit.org/polymer+:master/components/ est bloqué. Donc, utilisez une connexion sécurisée et cela fonctionnera sur tous les autres sites.

Vous pouvez consulter la console pour plus d'informations.

Source

2017-09-05 02:03:00 Ofisora

Remplacez <base> par l'attribut href de http://polygit.org/... à //polygit.org/.... Cela normalise l'importation pour fonctionner dans les environnements http et https.

Voici des exemples qui travaillent dans tous les dépôts: JsBin, Codepen, Plunker et 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>

Modifier

Notez que pour une version spécifique du polymère, vous pouvez utiliser

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

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

etc.

Source

2017-09-05 07:55:51 Mowzer

polymère code 2.x fonctionne en jsbin mais pas dans codepen, plunker ou jsFiddle

Répondre

Questions connexes