how to implement select2 in litelement

Question

I would like to know how to implement select2 dropdown with images in litelement. since i have dynamic option values , how to implement select with option textbox and flags in litelement

I have mentioned below sourcecode , please know how to do select with flags for dynamic options in litelement

//my-element.js
import {
  LitElement,
  html,
  css
} from "https://unpkg.com/@polymer/lit-element/lit-element.js?module";
export class Calculator extends LitElement {
  static get properties() {
    return {
      otherCountries: { type: Array }
      };
  }

  constructor() {
    super();
    this.otherCountries = [
      //drop down list
      "Austria",
      "Belgium",
      "Bulgaria",
      "Cyprus",
      "Czech Republic",
      "Denmark",
      "Estonia",
      "Finland",
    ];
  }


  render() {
    return html`
      <link
        rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      />

      <form id="form_values" class="form-inline" role="form" autocomplete="off">

              <div class="col-7 form-group mr-auto">
                <div class="arrowicon">
                  <select
                    style="width: 170px"
                    name="sourcecountrycode"
                    class="calcFont form-control"
                    id="sourcecountrycode"
                    @change="${this.sourcecountryChange}"
                    value=""
                  >
                    ${this.countrydata.countries.map(
                      (country, key) => html`
                        <option value=${country.country_code}
                          >${country.country_name}</option
                        >
                      `
                    )}
                  </select>
                </div>
              </div>
        </form>

    `;
  }
}
customElements.define("calculator-home", Calculator);

Answer 1

As select2 is a jQuery based replacement for select boxes. So, is not currently reliably work due to jQuery's need to access all nodes in the document running into the boundaries of the shadow DOM. Full explanation here.

But you may use lit-html as an example with your code:

Demo