Don't know why Polymer is not working
Question
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.
1 answers
solution1
1 ACCPTED 2015-11-08 19:04:00
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.