CODEWITHSUNDEEP
javascriptpolymer
Utkarsh Dixit
Utkarsh Dixit

Reputation: 4275

Don't know why Polymer is not working

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.

Upvotes: 1

Views: 213

Answers (1)

Peter Burns
Peter Burns

Reputation: 45361

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.

Upvotes: 1

Related Questions