Polymer - fail in implement a simple element

debugcn Published at Dev

user1025852

newbie in web dev. Trying to do tutorial if polymer - and implement a simple element.

index.html

<!doctype html>
<html>

<head>
  <title>My Test</title>

    <script src="./components/platform/platform.js"></script>

    <link rel="import" href="my-element.html"> 

    <style>
      div { width: 300px;}
       my-element { font: bold 16px cursive;}
    </style>  
</head>

<body>
  <div>
    <my-element></my-element>
  </div>
</body>    
</html>

my-element.html

<polymer-element name="my-element">
    <template>
        <div>
            <p>rtrthdfghdfghdfghdgsdfasdfa</p>
        </div>
    </template>
</polymer-element>

nothing happens on the screen. Checked with chrome SDL all resources are loaded ok (200).

this is the page source after rendering:

<!doctype html>
<html>

    <head>
      <title>My Test</title>
      <!-- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> -->
      <script src="./components/platform/platform.js"></script>

      <link rel="import" href="my-element.html"> 

      <style>
          div { width: 300px;}
          my-element { font: bold 16px cursive;}
      </style>  
    </head>

    <body>
      <div>
        <my-element></my-element>
      </div>
    </body>

    </html>

what I'm doing wrong?

Dirk Grappendorf

You need to change two things:

add the noscript attribute to your element, since it contains no JavaScript and doesn't register the component with Polymer('my-element',{});
import the main Polymer HTML file in your my-element.html: <link rel="import" href="./components/polymer/polymer.html">

Collected from the Internet

Please contact [email protected] to delete if infringement.