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

【问题标题】：Polymer 2.x code works in jsbin but not in codepen, plunker or jsfiddlePolymer 2.x 代码在 jsbin 中有效，但在 codepen、plunker 或 jsfiddle 中无效
【发布时间】：2017-09-06 05:21:01
【问题描述】：

以下代码在this jsbin 中正常工作，但在this codepen、this plunker 或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>

【问题讨论】：

标签： polymer jsfiddle plunker jsbin codepen

【解决方案1】：

由于除了 jsbin 之外的所有其他站点都使用安全版本的 HTTP 即 HTTPS，因此从源 http://polygit.org/polymer+:master/components/ 获取内容的请求被阻止。因此，请使用安全连接，它可以在所有其他站点中使用。

您可以查看控制台以获取更多信息。

【讨论】：

【解决方案2】：

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

以下是所有存储库中的工作示例：JsBin、Codepen、Plunker 和 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/">

等等

【讨论】：