Search code examples
polymerpolymer-1.0paper-elements

Polymer 1.x: Help getting this JSBin to render <paper-header-panel> and <paper-toolbar>

http://jsbin.com/mefonoqanu/1/edit?html,output

This JSBin doesn't render its contents. It does not display:

  • its header section — the <paper-toolbar> text (i.e., "Header") or
  • its content panel section — the <div> element (i.e., "Content goes here...").

What am I doing wrong? Please provide a working JSBin example.

Note: Per this link, <paper-header-panel> requires host to have a height.

Code

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
</head>
<body class="fullbleed layout vertical">
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
    </style>
    <paper-header-panel class="flex">
      <paper-toolbar>Header</paper-toolbar>
      <div>Content goes here...</div>
    </paper-header-panel>   
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>
Solution

  • http://jsbin.com/kabede/5/edit?html,output

    The changes:

    1. webcomponents from rawgit instead of bower_components
    2. <span class="title"> to make header visible
    3. style="width:100%; height: 100%;" on element to see its content