CODEWITHSUNDEEP
htmlpolymerweb-component
AncientSwordRage
AncientSwordRage

Reputation: 7617

Polymer core elements aren't displaying for me

I'm trying to create a simple web-page using polymer/bower/webcomponents, that I downloaded from here. This is my html:

<head>
  <script src="../bower-components/webcomponentsjs/webcomponents.js"></script>
  <!-- <link rel="stylesheet" type="text/script" href="script.js"> -->
  <link rel="import" 
  href="../bower-components/core-component-page/core-component-page.html">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <core-scaffold>
    <core-header-panel>
      <core-toolbar id="navheader">
        <span>Menu</span>
      </core-toolbar>
      <core-menu>
        <core-item label="One"></core-item>
        <core-item label="Two"></core-item>
      </core-menu>

    </core-header-panel>
    <span tool>Title</span>

  <div class="content">
      If drawer is hidden, press button to display drawer.
  </div>

  </core-scaffold>
</body>

main.css looks like:

body {
  font-family: sans-serif;
}
#navheader {
  background-color: #56BA89;
}
.content {
  padding: 20px;
}

I'm hosting this with the python simple server.

I'm confident the imports are 'working' (insomuch as the server is returning 200 for all imports), so I don't think it's that. But the webpage looks like this:

my webpage with broken elements

This toolkit looks so simple, I just pinched code from here, and I can't see why it's not working. I'm on Chrome Version 39.0.2171.65.

Upvotes: 1

Views: 345

Answers (2)

RenRen
RenRen

Reputation: 29

I also believe it is bower_components, this is on my mac however:

I would advise using different text file for all your core components you plan to use.

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657248

You need to import each element before you can use it.

<link rel="import" href="core-scaffold.html">

look at the source of https://www.polymer-project.org/components/core-scaffold/demo.html for more details and examples or this tutorial https://www.polymer-project.org/docs/start/tutorial/step-1.html

Upvotes: 1

Related Questions