另一个元素内部的聚合物核心头部面板

我正在尝试创建一个包含核心头部面板的“my-app”元素。看起来人们会想要为SPA做一件很常见的事情。另一个元素内部的聚合物核心头部面板

我的index.html：

<!DOCTYPE html> 
<html> 
<head>   
    <script src="bower_components/platform/platform.js"></script> 
    <link rel="import" href="elements/my-app.html"> 
</head> 
<body fullbleed layout vertical unresolved> 
    <my-app></my-app> 
</body> 
</html>

与我-app.html：

<link rel="import" href="/bower_components/polymer/polymer.html"> 
<link rel="import" href="/bower_components/core-toolbar/core-toolbar.html"> 
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html"> 
<link rel="import" href="/bower_components/core-header-panel/core-header-panel.html"> 

<polymer-element name="my-app"> 
    <template> 

     <core-header-panel flex> 
      <core-toolbar> 
       <div>Hello World!</div> 
      </core-toolbar> 
     </core-header-panel> 

    </template> 
    <script src="my-app.js"></script> 
</polymer-element>

，但我似乎得到的是：

enter image description here

什么想法？

编辑：我已经改变了我的代码，与聚合物文档（https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel）上的第一个例子完全相同，只是核心页眉面板在另一个元素内，而不是直接在主体内部。

EDIT2：如果禁用现在的位置是：相对核心头面板上，然后它看起来更好：

来源

2014-10-22 mikeysee

另一个元素内部的聚合物核心头部面板

回答

相关问题