Search code examples
javascripthtmlpolymerweb-componentgoogle-web-component

Polymer no output

I'm trying to learn Polymer, but I can't make it to work.

The new elements that I created are not showing any output other than the DOM elements

Kindly check my codes below:

Index.html

    <!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="dom-element.html">
    <link rel="import" href="hello-world.html">
  </head>
  <body>
    <dom-element></dom-element>
    <hello-world></hello-world>
  </body>
</html>

dom-element.html

<link rel="import"
      href="bower_components/polymer/polymer.html">

<dom-module id="dom-element">

  <template>
    <p>I'm a DOM element. This is my local DOM!</p>
  </template>

  <script>
    Polymer({
      is: "dom-element"
    });
  </script>

</dom-module>

hello-world.html

    <link rel="import" 
      href="bower_components/polymer/polymer.html" />
<polymer-element name="hello-world" noscript
    <template>
        <h1>Hello World</h1>
    </template>
</polymer-element>

here is the output: I'm a DOM element. This is my local DOM!

Solution

  • You dom-element looks fine and I have tested in this plunker. It works. You hello-world uses Polymer 0.5 syntax. polymer-element was renamed to dom-module in 1.0 as described in the migration guide.