Polymer 2.x 代码在 jsbin 中有效,但在 codepen、plunker 或 jsfiddle 中无效

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

下面的代码在 this jsbin but it does not work in either this codepen, this plunker or this jsfiddle.

中可以正常工作

为什么不呢?我怎样才能让它在三个它不工作的地方工作?

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>

因为除 jsbin 之外的所有其他站点都在使用 HTTP 的安全版本,即 HTTPS,从源 HTTPS 获取内容的请求=12=] 被屏蔽了。所以,使用安全连接,它将在所有其他站点上工作。

您可以查看控制台了解更多信息。

<base> 标签的 href 属性从 http://polygit.org/... 更改为 //polygit.org/...。这会将导入规范化以在 httphttps 环境中工作。

以下是所有存储库中的工作示例: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>

编辑

请注意,对于特定版本的 Polymer,您可以使用

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

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

等等