Simple polymer element is not rendering - html

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

Related

usin polymer cdn polygit

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

Polymer website don't load an element

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

Simplest possible HTML page with Polymer Paper Elements

How to create the simplest possible html page which uses Polymer Paper Elements?
I would like to have a single html file which loads all reqired libraries from elsewhere (CDN). Example:
<!DOCTYPE html>
<html>
<head>
<title>Polymer Test</title>
</head>
<body>
<paper-button>hello world paper button</paper-button>
</body>
</html>
This obviously does not work, because <paper-button> is not known to browsers. So what do I have to include to make it work on all current browsers?
Is it possible without downloading any libraries myself and having to place them on my webserver beside my html file?
You can use Polygit a CDN like tools for Polymer
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Simple</title>
<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-button/paper-button.html">
</head>
<body>
<paper-button raised> Hello World!</paper-button>
</body>
</html>
Here is codepen with polygit, you can fork kit

polymer not working or displaying no elements

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.

paper-button doesn't work, where is the mistake?

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>