Polymer 1.x：帮助让这个 JSBin 呈现 <paper-header-panel> 和 <paper-toolbar>

Question

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

This JSBin doesn't render its contents。不显示：

其header部分——<paper-toolbar>文本（即"Header"）或
其 内容面板 部分 — <div> 元素（即 "Content goes here..."）。

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

注： Per this link, <paper-header-panel> 要求宿主有 height.

代码

<!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>

Answer 1

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

变化：

webcomponents 来自 rawgit 而不是 bower_components
<span class="title"> 使 header 可见
style="width:100%; height: 100%;" 在元素上查看其内容

Answer 2

接受答案的代码

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>

  <base href="http://element-party.xyz/">
  <link rel="import" href="all-elements.html">

</head>
<body class="fullbleed layout vertical">
<x-element style="width:100%; height: 100%;"></x-element>
  <dom-module id="x-element">
  <template>
    <style>
    </style>
    <paper-header-panel class="flex">
      <paper-toolbar ><span class="title">Header</span></paper-toolbar>
      <div >
        Content goes here...<br>
      </div>
    </paper-header-panel>   
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</html>

Answer 3

Here is the minimum markup necessary to answer the question:

http://jsbin.com/jocinasovo/edit?html,output

变化

使用 :host
只需要height不需要width
无需从 bower_components (per this link) 切换到 rawgit CDN
不需要 .flex class <paper-header-panel>

注： Per this link, <paper-header-panel> 要求宿主有 height.

代码

<!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>
      :host {
        height: 100%
      }
    </style>
    <paper-header-panel>
      <paper-toolbar><span>Header</span></paper-toolbar>
      <div>Content goes here...</div>
    </paper-header-panel>   
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

Polymer 1.x：帮助让这个 JSBin 呈现 <paper-header-panel> 和 <paper-toolbar>

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

polymer

paper-elements

polymer-1.0

代码

变化

代码