如何将 Polymer 元素导入 plunker (plnkr.co)、jsBin 和 jsFiddle 等代码游乐场？答案

【问题标题】：How do I import Polymer elements into code playgrounds like plunker (plnkr.co), jsBin and jsFiddle?如何将 Polymer 元素导入 plunker (plnkr.co)、jsBin 和 jsFiddle 等代码游乐场？
【发布时间】：2015-10-10 15:06:33
【问题描述】：

问题：

在this Plunk 中，我想导入Polymer 1.0 元素<paper-button> 和<paper-menu>。

我该怎么做？

换句话说，什么是正确的<script> 和<link> 标记集以及它们各自的src 和href 属性将允许我的<paper-button> 和<paper-menu> 元素正常运行？

尝试：

在右边距，有一个搜索和导入外部库的选项。我用它来搜索 Polymer 1.0 并导入了以下内容。

<script data-require="polymer@1.0.0" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<script data-require="polymer@1.0.0" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>

注意：Here is a JS Bin 导入 Polymer 元素。

【问题讨论】：

您正在将 html 文档作为脚本导入。您需要使用 html 导入。 polymer-project.org/1.0/samples/components/polymer/polymer.html" rel="import">

标签： polymer web-component polymer-1.0 plunker

【解决方案1】：

使用此 CDN 导入您的元素/脚本： https://github.com/Download/polymer-cdn

因此，您的导入将是（取决于您要使用的版本）：

<script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-button/paper-button.html" />
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-menu/paper-menu.html" />

如果您只需要为您的组件提供对聚合物的引用，请导入以下内容：

<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/polymer/polymer.html" />

这对我有用。

【讨论】：

【解决方案2】：

Example here

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>...</style>
    <!-- Element markup goes here -->  
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

【讨论】：