ui-dropdown/element/view.js

A custom dropdown element

const view = document.createElement("template");
view.innerHTML = `
  <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/dist/css/bootstrap.css">

  <style>
    :host([hidden]) { display: none }

    :host {
      --ui-dropdown-background-color: #fc8325;
    }

    .container {
      background-color:var(--ui-dropdown-background-color);
    }

  </style>

  <div id="container">
        <label id="label">Choose an ice cream flavor:</label>
        <select name="" class="form-control">
            <option value="none"> --- Select One --- </option>
            <option value="chocolate">Chocolate</option>
            <option value="strawberry">Strawberry</option>
            <option value="vanilla">Vanilla</option>
        </select>
        <div id="errorMessage" class="invalid-feedback">
        </div>
    </div>
`;

export default view;