Paper Context Menu

HTML

<base href="http://polygit.org/polymer+:master/components/">
<link rel=import href="polymer/polymer.html">
<link rel=import href="iron-icons/iron-icons.html">
<link rel=import href="paper-icon-button/paper-icon-button.html">
<link rel=import href="paper-item/paper-item.html">
<link rel=import href="paper-menu/paper-menu.html">
<link rel=import href="paper-menu-button/paper-menu-button.html">

<dom-module is="x-foo">
  <template>
    <style>
      paper-menu.action-menu {
        --paper-menu-selected-item: {
          font-weight: initial;
        };
      }
      .eat-focus {
        min-height: 0px;
        color: transparent;
      }
      :host {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
      }
    </style>
    <div>
      <div>Regular menu button:</div>
      <paper-menu-button>
        <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
        <paper-menu class="dropdown-content">
          <paper-item>Open folder</paper-item>
          <paper-item>Do something</paper-item>
          <paper-item>Do something else</paper-item>
          <paper-item>Clear</paper-item>
        </paper-menu>
      </paper-menu-button>
    </div>
    <div>
      <div>"Action" menu button:</div>
      <paper-menu-button on-paper-dropdown-close="deselect_">
        <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
        <paper-menu class="dropdown-content action-menu">
          <paper-item class="eat-focus"></paper-item>
          <paper-item>Open folder</paper-item>
          <paper-item>Do something</paper-item>
          <paper-item>Do something else</paper-item>
          <paper-item>Clear</paper-item>
        </paper-menu>
      </paper-menu-button>
    </div>
  </template>
</dom-module>

<x-foo></x-foo>

JavaScript

Polymer({
  is: 'x-foo',
  deselect_: function() {
    this.$$('paper-menu').selected = ''
  },
})