index.html

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>basic-list-box</title>

  <!-- TODO: Use npm distribution of v1 polyfills when available. -->
  <script src="../demos/bower_components/shadydom/shadydom.min.js"></script>
  <script src="../demos/bower_components/custom-elements/custom-elements.min.js"></script>
  <script src="../demos/bower_components/custom-elements/src/native-shim.js"></script>
  <script src="../demos/bower_components/custom-elements/src/htmlelement-instanceof.js"></script>
  <script src="./dist/basic-list-box.js"></script>

  <link rel="stylesheet" href="../demos/demos.css">

</head>

<body>
  <basic-list-box aria-label="Fruits" style="height: 295px; max-width: 400px;">
    <div>Acai</div>
    <div>Acerola</div>
    <div>Apple</div>
    <div>Apricot</div>
    <div>Banana</div>
    <div>Blackberry</div>
    <div>Blueberry</div>
    <div>Cantaloupe</div>
    <div>Cherry</div>
    <div>Cranberry</div>
    <div>Currant</div>
    <div>Date</div>
    <div>Durian</div>
    <div>Fig</div>
    <div>Goji berry</div>
    <div>Gooseberry</div>
    <div>Grape</div>
    <div>Grapefruit</div>
    <div>Honeydew</div>
    <div>Jackfruit</div>
    <div>Kiwi</div>
    <div>Kumquat</div>
    <div>Lemon</div>
    <div>Lime</div>
    <div>Lychee </div>
    <div>Mango</div>
    <div>Mangosteen</div>
    <div>Mulberry</div>
    <div>Nectarine</div>
    <div>Orange</div>
    <div>Papaya</div>
    <div>Passion Fruit</div>
    <div>Peach</div>
    <div>Pear</div>
    <div>Pineapple</div>
    <div>Plum</div>
    <div>Pomegranate</div>
    <div>Pomelo</div>
    <div>Prickly Pear</div>
    <div>Raspberry</div>
    <div>Strawberry</div>
    <div>Tangerine</div>
    <div>Watermelon</div>
  </basic-list-box>
</body>

</html>