在Polymer2.0中实现动态下拉菜单。在Polymer1.0中工作，但在Polymer2.0中不工作

Question

我使用Polymer1完成了以下操作。在Polymer2.0中这样做不会触发button的自动下拉菜单。有人能告诉我该怎么做吗。这似乎与Shadow DOM有关。

在Polymer1中，index.html有dom ='shadow'和一个<content>标记，而不是<slot>，它到达dReadyDynamicRightMenuReady并触发下拉列表。但是在Polymer2.0中，它也会用到这个函数，并且不会触发下拉列表。

<!-- this is in my-spxl Polymer2.0 -->
<paper-menu-button class="userMenuPositionClass">
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-dropdown-menu class="dropdown-content">
    <iron-selector selected="[[choice]]" attr-for-selected="mychoice" role="navigation">
       <template id="" is="dom-repeat" items="[[dReadyDynamicRightMenuReady]]" as="menuOption">
           <paper-item>... </paper-item>
       </template>
    </iron-selector>
</paper-dropdown-menu>
</paper-menu-button>

<paper-button class=""> <img on-tap="openRightMenuFromPhoto" src="[[user.photoURL]]"> </paper-button>

脚本：openRightMenuFromPhoto() { var usersMenuButton = this.$.userMenuIconId; usersMenuButton.click(function(event) { dReadyDynamicRightMenuReady = [ { "myChoice": "spx21", "myHref": "/spx21", "myOptionValue": "chats" } ]; return dReadyDynamicRightMenuReady; }) }

Answer 1

代码中很少有错误：

1. 处理和触发事件： 单击监听器在函数中。那永远不会被称为。将事件侦听器放在ready()或connectedCallback上。有关如何执行单击此处的更多信息，请参见。
2. 设置属性值： 在函数中设置属性值并返回它将不会设置它。使用this.property = value并通知更改。或者，如果是数组/对象，则使用聚合物阵列突变法。
3. 阅读文档 of paper-menu-button： 使用class='dropdown-trigger'代替slot，如文档中所示。

另外，尝试创建一个最小、完整和可验证的示例。