聚合物纸菜单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