Polymer website don't load an element

Question

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

You are using Polymer 0.5 syntax. Here's a guide on how to migrate to the new syntax. — Maria
Thank you very much @Maria, Maybe spanish: "Gracias, estabas en lo correcto" — Jose Raul Perera

Adi Adi · Accepted Answer · 2015-12-15T01:57:11

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

Polymer website don't load an element

1 Answers