另一個元素內部的聚合物核心頭部面板

我正在嘗試創建一個包含核心頭部面板的「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

另一個元素內部的聚合物核心頭部面板

回答

相關問題