Web Component Select

Minimal web component select with no dependencies

To use the library just add styles and JavaScript

<link rel="stylesheet" href="...web-component-select.min.css">
<script src="...web-component-select.min.js"></script>

Then you can use select

<web-component-select name="selected-value" value="3" placeholder="Search" aria-placeholder="Search">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>
  <option value="10">Option 10</option>
</web-component-select>

With custom not found option

<web-component-select name="search" value="8" placeholder="Type to search" id="search" required>
  <option data-not-found click="alert('Looks like you didn\'t find anything...')">
    Click me to display alert!
  </option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>
  <option value="10">Option 10</option>
</web-component-select>