Полимерная Бумага-Меню 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 в браузере, близкий сОн тега правильно обертывает элементы бумажного элемента, взаимодействие работает.

Что я делаю неправильно?

В моей 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