CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0
Giancarlo Manuel Guerra Salvá
Giancarlo Manuel Guerra Salvá

Reputation: 1942

polymer element css not showing - no errors in inspector

I am working with Polymer and have an index.html that looks like this: 

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
  <title>Testing polymer</title>

  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">

</head>
<body unresolved fullbleed layout vertical center center-justified style="height: 100vh; margin: 0">
    <template is="auto-binding">
      <paper-tabs selected = "{{selectedPage}}">
        <paper-tab>Page 0</paper-tab>
        <paper-tab>Page 1</paper-tab>
        <paper-tab>Page 2</paper-tab>
        <paper-tab>Page 3</paper-tab>
      </paper-tabs>

    </template>
</body>
</html>

I then start the server with the following:

python -m SimpleHTTPServer

and navigate to localhost:8000. Upon loading the page, nothing displays. It's just a blank page. When I check the JS console to see if there were any errors, there are none. If I inspect the Elements tab, they are all there. Furthermore, when I check the Styles tab for each individual element, it displays absolutely nothing. I just get the standard orange, yellow, green, blue box.

I am using the paper-tabs included in the Polymer library, and have not manipulated their CSS in any way. What is happening? have I installed something incorrectly? Any help would be appreciated.

Upvotes: 0

Views: 64

Answers (1)

Alex Kimoto
Alex Kimoto

Reputation: 509

You should use "dom-bind" instead of "auto-binding" for the template.

Upvotes: 1

Related Questions