javascript - Polymer dropdown list issue -

i having huge difficulty implement simple dropdown list polymer 0.5.

i parallel migrating polymer .5 1.0. separate discussion ( migrating polymer project .5 1.0 error).

here code using define polymer element inside body:

<polymer-element name="x-trigger" extends="paper-icon-button" relative="" on-tap="{{toggle}}" noink=""> <template>     <shadow></shadow>     <content></content> </template> </polymer-element> 

i using element further down body this:

<x-trigger icon="menu" relative="" noink="" role="button" tabindex="0" aria-label="menu">     <paper-dropdown tabindex="-1" class="core-transition" style="outline: none; display: none;">         halign = left         <br>         valign = top     </paper-dropdown> </x-trigger> 

i defined following script section in head section of page:

<script>     polymer('x-trigger', {         toggle: function () {             if (!this.dropdown) {                 this.dropdown = this.queryselector('paper-dropdown');             }             this.dropdown && this.dropdown.toggle();         }     }); </script> 

the problem is, see icon button in page when ever click on button, nothing happens.

further debugging revealed,

1. if open console debugger in chrome ,
2. place break point on polymer or inside toggle method in script section
3. do page refresh
4. break point gets hit , drop-down works

i don’t know causing issue

update: while debugging got following error in line: polymer('x-trigger', {

/deep/ combinator deprecated

does mean have upgrade polymer v1 resolve issue or workaround polymer 0.5?

the difference between polymer 0.5 , 1.0 quite large. /deep/ selector reference 1 of big issues faced migrating.

i migrated project 0.5 1.0 , in order had change instances of /deep/ new notation.

my advice migrate 0.5 1.0 first, use new polymer documentation come solution.

in project implemented simple drop-down. here's approach:

<dom-module id="profile-edit-page">   <style>     // styling   </style>   <template>     <div class="container-app">       <div class="container-inner">          <!-- other form elements -->          <input is="iron-input" id="filterinput" type="text" required placeholder="automotive assistant" label="occupation" bind-value="{{order.occupation}}" on-focus="startpickingoccupation" on-keydown="updatefilter" on-blur="stoppickingoccupation" class="block field input-reg mb2"></input>          <div class$="[[pickingoccupationclass(pickingoccupation)]]">           <paper-menu >             <template id="occupationrepeat" is="dom-repeat" items="[[occupations]]" filter="isshown">               <paper-item class="option" on-click="pickoccupation">[[item]]</paper-item>             </template>           </paper-menu>         </div>          <button class$="inputclass" class="btn btn-primary btn-block" on-click="forward" value="{{order.registration}}">continue</button>       </div>     </div>    </template> </dom-module>  <script>   polymer({     properties: {       order: object,       pickingoccupation: {         type: boolean,         value: false       },       occupationfilter: {         type: string,         value: ""       },       occupations: {         type: array,         value: ["abattoir worker",       "accommodation officer",       "accountant",       // etc.       "zoology consultant"]       }     },     is: "profile-edit-page",      pickoccupation: function(e) {       this.set('order.occupation', e.model.item);       this.set('pickingoccupation', false);     },      startpickingoccupation: function() {       this.pickingoccupation = true;     },      stoppickingoccupation: function() {       this.async(function() {         this.pickingoccupation = false;       },500);     },      updatefilter: function() {       if(typeof(this.$.occupationrepeat) === "undefined") {         return;       }       this.set('occupationfilter', this.$.filterinput.value.tolowercase());       this.async(function() {         this.$.occupationrepeat.render();       },50);     },      isshown: function(item) {       if(this.order.occupation == '') {         return false;       }       return (item.tolowercase().search(this.occupationfilter) !== -1);     },     pickingoccupationclass: function(picking) {       if(this.pickingoccupation) {         return "picking";       } else {         return "hidden";       }     }   }); </script>