Как импортировать элементы Polymer в игровые площадки кода, такие как plunker (plnkr.co), jsBin и jsFiddle?

Вопрос:

В этом 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>

Примечание. Вот корзина JS, которая импортирует полимерные элементы.

Источник

2 ответа

Решение

Пример здесь

<!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>
Источник

Используйте этот 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" />

Это работает в плункер для меня.

Источник
Другие вопросы по тегам