Merge branch 'add-shadow-root-support'

Choices-js#938

# Conflicts:
#	src/scripts/constants.ts

README.md

@@ -445,6 +445,23 @@ Pass an array of objects:
 
 **Usage:** The maximum amount of search results to show.
 
+### shadowRoot
+
+**Type:** Document Element **Default:** null
+
+**Input types affected:** `select-one`, `select-multiple`
+
+**Usage:** You can pass along the shadowRoot from your application like so.
+
+```js
+var shadowRoot = document
+  .getElementById('wrapper')
+  .attachShadow({ mode: 'open' });
+var choices = new Choices({
+  shadowRoot: shadowRoot,
+});
+```
+
 ### position
 
 **Type:** `String` **Default:** `auto`

src/scripts/choices.ts

@@ -167,6 +167,10 @@ class Choices implements ChoicesInterface {
       Choices.defaults.options,
       userConfig,
     );
+    // Restore the shadowRoot if provided. deeperge converts it into an empty object.
+    if (userConfig.shadowRoot) {
+      this.config.shadowRoot = userConfig.shadowRoot;
+    }
 
     const invalidConfigOptions = diff(this.config, DEFAULT_CONFIG);
     if (invalidConfigOptions.length) {
@@ -1538,7 +1542,7 @@ class Choices implements ChoicesInterface {
   }
 
   _addEventListeners(): void {
-    const { documentElement } = document;
+    const documentElement = this.config.shadowRoot || document.documentElement;
 
     // capture events - can cancel event processing or propagation
     documentElement.addEventListener('touchend', this._onTouchEnd, true);
@@ -1592,7 +1596,7 @@ class Choices implements ChoicesInterface {
   }
 
   _removeEventListeners(): void {
-    const { documentElement } = document;
+    const documentElement = this.config.shadowRoot || document.documentElement;
 
     documentElement.removeEventListener('touchend', this._onTouchEnd, true);
     this.containerOuter.element.removeEventListener(

src/scripts/defaults.ts

@@ -61,6 +61,7 @@ export const DEFAULT_CONFIG: Options = {
   shouldSort: true,
   shouldSortItems: false,
   sorter: sortByAlpha,
+  shadowRoot: null,
   placeholder: true,
   placeholderValue: null,
   searchPlaceholderValue: null,

src/scripts/interfaces/options.ts

@@ -352,6 +352,11 @@ export interface Options {
    */
   resetScrollPosition: boolean;
 
+  /**
+   * The shadow root for use within ShadowDom
+   */
+  shadowRoot: any;
+
   /**
    * Whether choices and groups should be sorted. If false, choices/groups will appear in the order they were given.
    *