聚合物紙菜單HTML在瀏覽器中不能正確顯示

Question

我有一個非常基本的實現紙質菜單的嘗試。然而，呈現的HTML是不正確的，並打破了交互。當點擊一個菜單項時，整個列表消失。我已經確定這是因爲紙張項目元素不在紙張菜單元素內的非常關鍵的div內呈現。

我component.html看起來是這樣的：

<div> 
    <paper-menu selected="0"> 
     <paper-item>Location 1</paper-item> 
     <paper-item>Location 2</paper-item> 
    </paper-menu> 
</div> 

然而，什麼被渲染的是這樣的：

<div> 
    <paper-menu role="menu" tabindex="0" selected="0" class="x-scope paper-menu-0"> 
     <div class="selectable-content style-scope paper-menu"> 
     </div> 
     <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">Location 1</paper-item> 
     <paper-item role="option" tabindex="0" aria-disabled="false" class="x-scope paper-item-0">Location 2</paper-item> 
    </paper-menu> 
</div> 

如果我操縱在瀏覽器中呈現的HTML這樣的密切div標籤正確包裝紙項目元素，交互工作。

我在做什麼錯？

在我的index.html我：

<script src="lib/webcomponentsjs/webcomponents-lite.js"></script> 
<link rel="import" href="lib/paper-button/paper-button.html" /> 
<link rel="import" href="lib/paper-input/paper-input.html" /> 
<link rel="import" href="lib/paper-item/paper-item.html" /> 
<link rel="import" href="lib/paper-menu/paper-menu.html" /> 
<link rel="import" href="lib/paper-listbox/paper-listbox.html" /> 
<link rel="import" href="lib/paper-toggle-button/paper-toggle-button.html" /> 
<link rel="import" href="lib/paper-progress/paper-progress.html" /> 
<link rel="import" href="lib/paper-dropdown-menu/paper-dropdown-menu.html" /> 

在我bower.json我引用下面的版本

{ 
    "name": "permit-manager-app", 
    "private": true, 
    "dependencies": { 
    "polymer": "^1.4.0", 
    "webcomponentsjs": "^0.7.22", 
    "paper-button": "^1.0.11", 
    "paper-input": "^1.1.10", 
    "paper-progress": "^1.0.9", 
    "paper-dropdown-menu": "1.2.1", 
    "paper-menu": "1.2.2", 
    "paper-item": "1.2.1", 
    "paper-listbox": "1.1.2", 
    "paper-toggle-button": "^1.1.2" 

    } 
} 

這是Angular2測試17

Answer 1

我我們在同一個項目中發現了一個類似的問題，使用紙張下拉菜單，其中的關鍵部分不合適，控件無法正常工作。

詳情請看這裏：

Polymer paper-dropdown-menu not rendered correctly in browser