select2 broken close in shadowDOM

by mslocum

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.js"></script>
<my-select style="width:200px;"></my-select>

<template id="my-select">
  <select name="states[]" multiple="multiple">
    <optgroup label="Alaskan/Hawaiian Time Zone">
      <option value="AK">Alaska</option>
      <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
      <option value="CA">California</option>
      <option value="NV">Nevada</option>
      <option value="OR">Oregon</option>
      <option value="WA">Washington</option>
    </optgroup>
    <optgroup label="Mountain Time Zone">
      <option value="AZ">Arizona</option>
      <option value="CO">Colorado</option>
      <option value="ID">Idaho</option>
      <option value="MT">Montana</option>
      <option value="NE">Nebraska</option>
      <option value="NM">New Mexico</option>
      <option value="ND">North Dakota</option>
      <option value="UT">Utah</option>
      <option value="WY">Wyoming</option>
    </optgroup>
    <optgroup label="Central Time Zone">
      <option value="AL">Alabama</option>
      <option value="AR">Arkansas</option>
      <option value="IL">Illinois</option>
      <option value="IA">Iowa</option>
      <option value="KS">Kansas</option>
      <option value="KY">Kentucky</option>
      <option value="LA">Louisiana</option>
      <option value="MN">Minnesota</option>
      <option value="MS">Mississippi</option>
      <option value="MO">Missouri</option>
      <option value="OK">Oklahoma</option>
      <option value="SD">South Dakota</option>
      <option value="TX">Texas</option>
      <option value="TN">Tennessee</option>
      <option value="WI">Wisconsin</option>
    </optgroup>
    <optgroup label="Eastern Time Zone">
      <option value="CT">Connecticut</option>
      <option value="DE">Delaware</option>
      <option...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

JavaScript

customElements.define('my-select',
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById('my-select').content;

      const shadowRoot = this.attachShadow({mode: 'closed'});
      shadowRoot.appendChild(template.cloneNode(true));
        
      $(shadowRoot).find('select').select2({
      	closeOnSelect: false
      });
    }
  }
);