CODEWITHSUNDEEP
web-applicationspolymer
user1025852
user1025852

Reputation: 2794

Polymer - fail in implement a simple element

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?

Upvotes: 0

Views: 63

Answers (1)

Dirk Grappendorf
Dirk Grappendorf

Reputation: 3422

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">

Upvotes: 2

Related Questions