I'm trying to render a simple Polymer-element. I have followed the docs and it is not rendered. The weird thing is that a more complex polymer tags do work (such as <dom-module id=""> ), but no luck with <polymer-element>.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/daniel-element.html">
<title>Polymer Learning</title>
</head>
<body>
<daniel-element></daniel-element>
</body>
</html>
daniel-element.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="fav-color">
<template>
This is <b>{{owner}}</b>'s fav-color element.
{{owner}} likes the color
<span style="color: {{color}}">{{color}}</span>.
</template>
<script>
Polymer({
owner: "Daniel",
color: "red"
});
</script>
</polymer-element>
When I run:
python -m SimpleHTTPServer
OR
polyserve
The browser does not render the element.
I have looked on this subject and did not found a solution.. thanks before.
The <polymer-element> tag was used in older versions of Polymer. With 1.0 you need to use <dom-module id=""> which does work as you have noticed. Have a look at the migration guide to find out more on specifying local DOM in 1.0.
Related
I'm brand new to polymer (2.0), so I was just practicing with a sample application. I wanted to create a basic 'login' screen with two paper input fields.
I'll show you what I have got so far.
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="import" href="./bower_components/webcomponentsjs/webcomponents-lite.js">
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./testing/login-page.html">
</head>
<body unresolved>
<login-page></login-page>
</body>
</html>
And my login-page.html, which is in a folder called 'testing'
<dom-module id="login-page">
<template>
<h2>Hello!</h2>
<paper-input label="test">test</paper-input>
</template>
<script>
Polymer({
is: 'login-page',
properties: {
prop1: {
type: String,
value: 'login-page',
},
}
});
</script>
</dom-module>
I have installed the paper-input using bower with the following command: bower install paper-input
Problem is, it's not showing up, but it is present in the shadow dom when I inspect the page. Everything in the h2 tag is showing up. Again, I'm brand new to polymer, so is there something I'm doing wrong?
If you are using Polymer 2.0 you need to download elements with #2.0-preview suffix.
In your case
bower i --save PolymerElements/paper-input#2.0-preview
and then import it in your page
<link rel="import" href="/bower_components/paper-input/paper-input.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
I'm following the Polymer tutorial at https://www.youtube.com/watch?v=wId1gMzriRE
I'm using Polymer 1.0 (the tutorial is an older version). I had changed the platform.js to webcomponents.js.
Now my index.html is as
<!doctype html>
<html>
<head>
<title>Polymer Trial</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/hello-world.html">
</head>
<body>
<h2>Test</h2>
<hello-world></hello-world>
</body>
</html>
And I've my element file hello-world.html as
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-world" noscript>
<template>
<h1>Hello World!</h1>
</template>
</polymer-element>
But all I get in the browser is as below; no "Hello World!" is rendered.
Am I missing something? How can I figure out where is the issue?
Attached below is my directory structure.
The older tutorial will not work for Polymer 1.0, as there are many drastic changes. In the new version, a Hello World would look like:
<dom-module id="hello-world">
<template>
<h1>Hello world!</h1>
</template>
</dom-module>
<script>
Polymer({
is: 'hello-world'
});
</script>
More information can be found in the Polymer documentation at https://www.polymer-project.org/1.0/docs/devguide/feature-overview.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 following this YouTube video and I have seen every previous video in the tutorial series.
This is my code:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/hello-world.html">
</head>
<body>
<hello-world></hello-world>
</body>
</html>
And the second page:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name='hello-world' noscript>
<template>
<h1>Hello World</h1>
</template>
</polymer-element>
But my page is still blank, what am I doing wrong?
I use Wamp.
It's always happen to me if i'm not correctly import an element or library. So make sure all path locations are correct.
Make sure you use 0.5 version because in 0.8 custom element declaration is using <dom-module id="element-name"></dom-module>
First check your polymer version. it is found on bower.json under dependencies
check "polymer": "Polymer/polymer#^1.7.0" as you can see mine is 1.7.0. if you are using polymer 1.0 and above. the custom element declaration has been changed.
Here is a detailed note on what you have to do.
Change <script src="bower_components/webcomponentsjs/webcomponents.js"></script> to <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
Custom element declaration has also been changed from
<polymer-element name="hello-world">
<template>
<div>Hello World</div>
</template>
<script>
Polymer();
</script>
</polymer-element>
to
<dom-module id="hello-world">
<template>
<div>Hello World</div>
</template>
<script>
Polymer({
is: "hello-world"
});
</script>
</dom-module>
Check The Migration Guide Page https://www.polymer-project.org/1.0/docs/migration