JSFiddle - React, Tailwind, and code Playground

HTML

<script>Polymer = {dom: 'shadow', lazyRegister: true, useNativeCSSProperties: false};</script>
<base href="https://polygit.org/polymer+:v1.6.1/*+:master/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu-light.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-listbox/paper-listbox.html">

<dom-module id="x-foo">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }
      div {
        display: flex;
        justify-content: space-around;
      }
      div > * {
      }
    </style>
    <paper-button on-tap="clear">Clear</paper-button>
    <div>
      <paper-dropdown-menu>
        <paper-listbox id="menuListbox" class="dropdown-content" selected="{{selected}}">
          <paper-item>Option 1</paper-item>
          <paper-item>Option 2</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
      <paper-dropdown-menu-light>
        <paper-listbox id="menuListbox" class="dropdown-content" selected="{{selected}}">
          <paper-item>Option 1</paper-item>
          <paper-item>Option 2</paper-item>
        </paper-listbox>
      </paper-dropdown-menu-light>
    </div>
  </template>
</dom-module>

<x-foo></x-foo>

JavaScript

Polymer({
  is: 'x-foo',
  properties: {
    selected: Number,
  },
  clear: function() {
    this.selected = -1;
  },
});