Polymer 2.x code works in jsbin but not in codepen, plunker or jsfiddle

Question

The below code works properly in this jsbin but it does not work in either this codepen, this plunker or this jsfiddle.

Why not? How can I get it to work in the three locations where it does not?

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>

score 1 · Accepted Answer · answered Sep 05 '17 at 02:03

Since every other site other than jsbin is using the secure version of HTTP i.e. HTTPS, the request to get the contents from the source http://polygit.org/polymer+:master/components/ is blocked. So, use secure connection and it will work in every other site.

You can check the console for more information.

Let Me Tink About It · Answer 2 · 2017-09-05T21:21:01.110

Change <base> tag's href attribute from http://polygit.org/... to //polygit.org/.... This normalizes the import to work in both http and https environments.

Here are working examples in all repositories: JsBin, Codepen, Plunker and 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>

Edit

Note that for a specific version of Polymer, you can use

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

or

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

etc.

Polymer 2.x code works in jsbin but not in codepen, plunker or jsfiddle

2 Answers2