Polymer 如何将选定的core菜单项放入自定义聚合物元素中？

我试图将

纸张下拉列表

封装在

纸张按钮

中。为此，我制作了一个自定义元素，

纸张下拉框

：

聚合物({
切换：函数（）{
如果（！this.dropdown）{
this.dropdown=this.querySelector（“纸面下拉菜单”）；
}
this.dropdown&&this.dropdown.toggle（）；
}
});

我在页面中使用它，就像：

<paper-dropdown-holder raised tabindex="0" class="unpadded">
        <paper-dropdown class="dropdown" flex>
            <core-menu class="menu" selected="0">
                <paper-item><a href="#writing">Writing</a></paper-item>
                <paper-item><a href="#blog">Blog</a></paper-item>
                <paper-item><a href="#art">Art</a></paper-item>
            </core-menu>
        </paper-dropdown>
</paper-dropdown-holder>

我的问题是，如何将当前所选菜单项的文本自动放入

纸张下拉框

我的第一次尝试是只使用标准的

纸张下拉菜单

，但我不能像

纸张按钮那样轻松地设置样式有没有办法做到这一点而不是（因为没有更好的术语）哈奇？如果答案符合聚合物哲学，我很乐意

额外挑战：如何设置“选择部分”之类的默认文本？
Polymer最棒的事情之一是它的开源。。。也就是说，您可以学习如何在现有元素的基础上实现新元素

如果您查看
纸张下拉菜单
源代码，您可以很容易地制作类似的东西，但使用
纸张按钮
作为“控件”

So

新元素应扩展核心下拉列表基础
纸张按钮
要使该元素在逻辑上工作，您可以使用
通过装订（
core overlay open
）获得
纸张下拉菜单的一些帮助，
核心激活
，
核心选择
）事件到相应的处理程序。
（实际绑定发生在
core下拉列表base
in
dropdown
调用内部
附加的
事件侦听器的getter

把它们放在一起：

<polymer-element name="paper-dropdown-holder" extends="core-dropdown-base" relative>
  <template>
    <div>
      <paper-button raised on-tap="{{toggle}}">{{selectedItemLabel || label}}</paper-button>
      <content></content>
    </div>
  </template>

  <script>
      Polymer('paper-dropdown-holder', {
        publish: {
          label: 'Select an item',
        },

        selectedItemLabel: '',

        overlayListeners: {
          'core-overlay-open': 'openAction',
          'core-activate': 'activateAction',
          'core-select': 'selectAction'
        },

        activateAction: function(e) {
          this.opened = false;
        },

        selectAction: function(e) {
          var detail = e.detail;
          if (detail.isSelected) {
            this.selectedItemLabel = detail.item.label || detail.item.textContent;
          } else {
            this.selectedItemLabel = '';
          }
        }

      });
  </script>
</polymer-element>


{{selectedItemLabel | | label}
聚合物（“纸张下拉支架”{
出版：{
标签：“选择项目”，
},
selectedItemLabel:“”，
超链接链接器：{
“core overlay open”：“openAction”，
“核心激活”：“激活反应”，
“核心选择”：“选择操作”
},
激活反应：功能（e）{
this.opened=false；
},
选择操作：功能（e）{
var-detail=e.detail；
如果（选择详细信息）{
this.selectedItemLabel=detail.item.label | | detail.item.textContent；
}否则{
this.selectedItemLabel=''；
}
}
});

.
我想我的帖子已经回答了你的问题，除非你对此有任何说明？