I've done the following using Polymer1
. Doing the same in Polymer2.0
does not trigger the automatic dropdown menu of the button
.
Please could someone tell me what to do. It seems to have to do with Shadow DOM
.
In Polymer1
, the index.html
has dom ='shadow'
, and a <content>
tag instead of <slot>
, and it gets to the dReadyDynamicRightMenuReady
and triggers the dropdown.
But in Polymer2.0
it also gets to this function, and does not trigger the dropdown.
<!-- 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>
Script:
openRightMenuFromPhoto() {
var usersMenuButton = this.$.userMenuIconId;
usersMenuButton.click(function(event) {
dReadyDynamicRightMenuReady = [
{ "myChoice": "spx21", "myHref": "/spx21", "myOptionValue": "chats" }
];
return dReadyDynamicRightMenuReady;
})
}
There are few mistakes in your code:
Handle and firing events:
Click listeners is inside a function. That will never be called. Put event listeners on ready()
or connectedCallback
. For more information about how to do that click here.
Setting property value:
Setting properties value inside function and returning it won't set it. Use
this.property = value
and notify the changes. OR, if it is an array/object use polymer array mutation methods.
Read the documentation of paper-menu-button
:
Instead of class='dropdown-trigger'
use slot
as in documentation.
Also, try to create a Minimal, Complete, and Verifiable example.