I've been trying to use the polymer CDN , polygit on plunker but i can't even render a single polymer element. In the folowing plunk and code link i tried rendering a paper-tab and paper-button. Please can someone show me what i'm doing wrong. thanks.
https://plnkr.co/edit/z0y06qu4LdfpxhcpYyn7?p=preview
...
<head>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
` <link rel="import" href="paper-material/paper-material.html">
<link href="paper-button/paper-button.html" rel="import">
<link href="paper-tabs/paper-tabs.html" rel="import">
</head>
<body unresolved>
<paper-button raised>New</paper-button>
<paper-tabs>
<paper-tab>Color</paper-tab>
<paper-tab>Code</paper-tab>
<paper-tab>Mark</paper-tab>
</paper-tabs>
</body>
...
Changing protocol to https will solve you issue.
<base href="https://polygit.org/polymer+:master/components/">
Related
I have trouble with Polymer. I wanna use it in my PhoneGap project, but on the start, I met a problem. The simple paper-button is not rendering. Even in a browser, not only on device. I will grateful for the help and for some tutorials about using polymer.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer-mini.html">
<link rel="import" href="bower_components/paper-button">
</head>
<body>
<p>Hello World!!!</p>
<paper-button>GO</paper-button>
</body>
</html>
The import of your paper-button is incorrect, you should use:
<link rel="import" href="bower_components/paper-button/paper-button.html">
Hello
I'm starting with Polymer 1.0 and I'm trying to create my first element and load into an html page. I'm using Chrome Dev Editor, the project was created correctly because I could load all the example. After that I eliminate all the example code and create a:
Folder "elements" into the project
"hello-world.html" with the following code:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-world" noscript>
<template>
<h1>Hello World</h1>
</template>
Updated the code in the "index.html" file
<!doctype html>
<html>
<head>
<title>PolyExample</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/hello-world.html">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Test Polymer</h1>
<hello-world></hello-world>
</body>
</html>
I will appreciate any help about this
Thanks in advance
Your code has a serious problem in the way you create your element,
You use a dom-module element to create a new element and you need to write some JS to initialize the element. Below is an example
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<template>
<h1>Hello World</h1>
</template>
<script>
Polymer({
is: "hello-world"
});
</script>
</dom-module>
The script tag with that code is essential for your element to work.
This is probably as simple as it gets.
To read more on that follow the link:
https://www.polymer-project.org/1.0/docs/start/quick-tour.html
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.
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.
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>
Trying to display hello world using elements but nothing happens any help?
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/hello-world.html">
</head>
<body unresolved>
<hello-world></hello-world>
</body>
</html>
hello-world.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-world" nonscript>
<template>
<h2>Hello World</h2>
</template>
</polymer-element>
Code for "hello-world.html" is now:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<template>
<h1>Hello World</h1>
</template>
<script>
Polymer ({ is: "hello-world", });
</script>
</dom-module>
If you are using polymer version 0.8 or 0.9, then <polymer-element ... should be <dom-module ...
See more from polymer site:
https://www.polymer-project.org/0.9/docs/start/quick-tour.html
You have a typo, nonscript needs to be noscript.
<polymer-element name="hello-world" noscript>
I have the same problem and dont find the mistake.
index.html
<html>
<head>
<title>Polymer-Application</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="bower_components/jquery/dist/jquery.min.js"></script>-->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<!-- file is available, auto completed by api -->
<link rel="import" href="hello/hello.html">
<!-- file is available, auto completed by api -->
<!-- netbeans doesn't know relation import -->
</head>
<body>
<h1>My first Polymer-Application</h1>
<hello></hello>
</body>
</html>
hello/hello.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<!-- file is available, auto complete by api -->
<polymer-element name="hello" noscript>
<template>
<h1>Hello Polymer world</h1>
</template>
</polymer-element>
My platfrom is:
Win 8.1
nodejs
bower
polymer (installed over bower, folders and files are availible)
git
netbeans dev edition (as editor)
xammp (as apache webserver)
tested with chrome, firefox and ie10 and the custom element is not be shown. i don't think it's a browser problem. it's the simpliest element you can write, but why did it not work?
Edit:
tested it on a clean ubuntu installation. and it still does not work?
i also tested original code from the polymer page and this won't work too.
am i to stupid for copy paste?
Edit 2:
i found it an have running my polymer apps. If i use Polymer 1.0.9 i should not read the tutorial for 0.5.0
changes:
index.html:
<!DOCTYPE html>
<html>
<head>
...
<script scr="bower_components/webcomponents-lite.min.js"></script>
<!-- the lite edition is needet since polymer version 0.8 -->
<link rel="import" href="hello/hello.html">
...
</head>
<body>
<hello></hello>
</body>
</html>
hello/hello.html:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hello">
<!-- its not longer a polymer-element. we have to use dom-module and id and the noscript option is not longer supported -->
<template>
<template>
<script>
// everytime you need to initialize a Polymer object
Polymer({
is: 'hello' // must be set now
});
</script>
</dom-module>
if you want to work with parameters you need to set it in the polymer ready function and every placeholder must be surrounded by a html tag like span without any other content in it.
Replace the line
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
with
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
This should fix the issue.
I am learning polymer. Want to link paper-button, but doesn't work. where is the mistake?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
<paper-button>flat button</paper-button>
</body>
</html>
You code is working with a proper bower configuration. Here is the single module I installed, I guess this is your problem:
bower install Polymer/paper-elements
This is documented in the guide Using elements of the Polymer project.
Check here. it is working.
I make it using following way. I think your imported links are not loading.
<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.min.js?20150316"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-button/paper-button.html">
<body>
<paper-button>flat button</paper-button>
</body>