JSFiddle - React, Tailwind, and code Playground
HTML
<script>Polymer = {dom: 'shadow'};</script>
<base href="https://polygit.org/*+:master/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-menu/paper-menu.html">
<dom-module id="x-foo">
<template>
<style>
:host {
display: flex;
flex-direction: column;
}
:host > paper-menu, paper-listbox {
height: 200px;
overflow: scroll;
}
</style>
<h4>regular paper-menu</h4>
<paper-menu>
<template is="dom-repeat" items="{{items}}">
<paper-item>Item [[item]]</paper-item>
</template>
</paper-menu>
<h4>paper-listbox inside a paper-dropdown-menu</h4>
<paper-dropdown-menu>
<paper-listbox class="dropdown-content">
<template is="dom-repeat" items="{{items}}">
<paper-item>Item [[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
<h4>native select</h4>
<select size="10">
<template is="dom-repeat" items="{{items}}">
<option>Item [[item]]</option>
</template>
</select>
</template>
</dom-module>
<x-foo></x-foo>
JavaScript
Polymer({
is: 'x-foo',
properties: {
items: {
type: Array,
value: function() {
var arr = [];
for (var i = 0; i < 50; i++)
arr.push(i);
return arr;
}
}
},
});