How do I import Polymer elements into code playgro

2019-02-16 01:33发布

站内问答 / 后端开发
1257 2 4

Question:

In this Plunk, I want to import the Polymer 1.0 elements <paper-button> and <paper-menu>.

How do I do that?

In other words, what is the proper set of <script> and <link> tags and their respective src and href attributes that will allow my <paper-button> and <paper-menu> elements to properly function?

Attempts:

In the right margin, there is an option to search and import external libraries. I used that to search for Polymer 1.0 and I imported the following.

<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>

Note: Here is a JS Bin that imports Polymer elements.

2条回答
一纸荒年 Trace。
2楼-- · 2019-02-16 01:56

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>
查看更多
0人赞 添加讨论(0) 举报
再贱就再见
3楼-- · 2019-02-16 02:03

Use this cdn to import your elements/scripts: https://github.com/Download/polymer-cdn

so, your imports would be (dependent on the version you would like to use):

<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" />

If you just need a reference to polymer for your component then import this:

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

This is working in plunker for me.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)