CODEWITHSUNDEEP
javascripthtmlcsspolymer-1.0
Lokin.S
Lokin.S

Reputation: 53

Polymer dom-module show nothing

i am new to polymer. So i just follow the tutorial. And i don't know why details in doesn't show on the screen.

this is the code from the net: (index) First poly 

<body class:"vertical layout" style="background-color: #dddddd;">
    <script src="components/webcomponentsjs/webcomponents.js"></script>

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

        <paper-header-panel>              
            <link rel="import" href="components/paper-material/paper-material.html">
            <paper-material style="background: #ADADAD">
                <link rel="import" href="first.html">
                <first>
                </first>

            </paper-material>
        </paper-header-panel>
</body>
</html>

(first) 

<dom-module id="first">
    <template>
       <style>
          div { color: red }
       </style>
       <div>Hello World</div> 
    </template>
    <script>
        Polymer ({ is : "first" }); 
    </script>
</dom-module>

Upvotes: 0

Views: 159

Answers (1)

Ben Thomas
Ben Thomas

Reputation: 3200

From the Polymer docs here

By specification, the custom element’s name must contain a dash (-).

Therefore your elements name first is invalid. Try renaming to my-element. I would also move your script and element imports into the <head> of the project.

Upvotes: 2

Related Questions