Search code examples
polymerweb-component

Polymer hello-world component not rendering

I'm following the Polymer tutorial at https://www.youtube.com/watch?v=wId1gMzriRE

I'm using Polymer 1.0 (the tutorial is an older version). I had changed the platform.js to webcomponents.js.

Now my index.html is as

<!doctype html>
<html>
  <head>
    <title>Polymer Trial</title>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="elements/hello-world.html">
  </head>
    <body>
        <h2>Test</h2>
        <hello-world></hello-world>
    </body>
</html>

And I've my element file hello-world.html as

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

But all I get in the browser is as below; no "Hello World!" is rendered. enter image description here

Am I missing something? How can I figure out where is the issue?

Attached below is my directory structure. enter image description here

Solution

  • The older tutorial will not work for Polymer 1.0, as there are many drastic changes. In the new version, a Hello World would look like:

    <dom-module id="hello-world">
  <template>
    <h1>Hello world!</h1>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'hello-world'
  });
</script>

    More information can be found in the Polymer documentation at https://www.polymer-project.org/1.0/docs/devguide/feature-overview.html