I have just started working on my first polymer web app but i can't figure out how to create a simple app in polymer. I installed polymer and web_components. And made the index.html file with the source code below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First polymer web APP</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<polymer-element name="x-foo" noscript>
<template>
<h1>HELLO FROM x-foo</h1>
</template>
</polymer-element>
<x-foo></x-foo>
</body>
</html>
But it doesn't seems to work. I looked into the console and this is what i look. I think there is no problem in this:
GET
http://localhost:3000/ [HTTP/1.1 304 Not Modified 23ms]
GET
http://localhost:3000/bower_components/webcomponentsjs/webcomponents.min.js [HTTP/1.1 304 Not Modified 12ms]
GET
XHR
http://localhost:3000/bower_components/polymer/polymer.html [HTTP/1.1 304 Not Modified 3ms]
GET
XHR
http://localhost:3000/bower_components/polymer/polymer-mini.html [HTTP/1.1 304 Not Modified 36ms]
GET
XHR
http://localhost:3000/bower_components/polymer/polymer-micro.html [HTTP/1.1 304 Not Modified 2ms]
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create
Please help as i am beginner to polymer. Thanks in advance.
It looks like you're using Polymer 0.5 syntax, but you've probably got Polymer 1.0 installed.
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First polymer web APP</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<dom-module name="x-foo">
<template>
<h1>HELLO FROM x-foo</h1>
</template>
<script>
window.addEventListener('WebComponentsReady', function() {
Polymer({is: 'x-foo'});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
</html>
The window.addEvetnListener part is only necessary if you're declaring your element in the main HTML file of your application rather than in an HTML import.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments