I'm new to Polymer and I'm using WAMP to host my Polymer 1.0 project in my local host. I've seen other questions in this topic but none of the answers helped me as I'm still getting blank page with no errors (or warnings) in Chrome browser. The only thing I get is something which looks like a grey bar at the top of the page.
I'm following this tutorial in Youtube.
I've actually tried that using Python on localhost:8000 and I get the same thing, so I suspect something is wrong with my code.
Note 1: if I only have a <paper-input> element with its declaration, it works fine.
Note 2: the code actually worked in the beginning, but as I started to do some experiments(!!!) and then the page started to render blank with no errors! strange!
This is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="/bower_components/paper-material/paper-material.html">
<link rel="import" href="/bower_components/paper-toolbar/paper-toolbar.html">
</head>
<body class="vertical layout" style="background-color: #dddddd;">
<paper-header-panel>
<paper-material style="background-color: #ffffff;">
<paper-toolbar>
<div>Example My Polymer</div>
</paper-toolbar>
<h3>This is my content 1</h3>
<p>Hello</p>
</paper-material>
</paper-header-panel>
</body>
</html>
This is a common issue when using paper-header-panel
Important: The paper-header-panel will not display if its parent does not have a height.
Make your body (the paper-head-panel's parent) take up the full page height:
<body class="fullbleed">