From 8ea5c04ce7f50955a239eb9749d71d1ff95c097b Mon Sep 17 00:00:00 2001
From: Travis Tidwell <travis@form.io>
Date: Mon, 29 Mar 2021 20:13:32 -0500
Subject: [PATCH 1/2] Adding shadowRoot support.

---
 src/scripts/choices.ts    | 8 ++++++--
 src/scripts/constants.ts  | 1 +
 src/scripts/interfaces.ts | 5 +++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts
index 238bef8..bf8937a 100644
--- a/src/scripts/choices.ts
+++ b/src/scripts/choices.ts
@@ -128,6 +128,10 @@ class Choices {
       // instead of concatenating with the default array
       { arrayMerge: (_, sourceArray) => [...sourceArray] },
     );
+    // 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) {
@@ -1308,7 +1312,7 @@ class Choices {
   }
 
   _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);
@@ -1362,7 +1366,7 @@ class Choices {
   }
 
   _removeEventListeners(): void {
-    const { documentElement } = document;
+    const documentElement = this.config.shadowRoot || document.documentElement;
 
     documentElement.removeEventListener('touchend', this._onTouchEnd, true);
     this.containerOuter.element.removeEventListener(
diff --git a/src/scripts/constants.ts b/src/scripts/constants.ts
index e833807..99f799a 100644
--- a/src/scripts/constants.ts
+++ b/src/scripts/constants.ts
@@ -60,6 +60,7 @@ export const DEFAULT_CONFIG: Options = {
   shouldSort: true,
   shouldSortItems: false,
   sorter: sortByAlpha,
+  shadowRoot: null,
   placeholder: true,
   placeholderValue: null,
   searchPlaceholderValue: null,
diff --git a/src/scripts/interfaces.ts b/src/scripts/interfaces.ts
index 9d02368..9ca7ad4 100644
--- a/src/scripts/interfaces.ts
+++ b/src/scripts/interfaces.ts
@@ -503,6 +503,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.
    *

From a00350d14ed2cdb7038c7efdb063b5106fdb26b0 Mon Sep 17 00:00:00 2001
From: Travis Tidwell <travis@form.io>
Date: Mon, 29 Mar 2021 20:25:13 -0500
Subject: [PATCH 2/2] Adding docs.

---
 README.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/README.md b/README.md
index 202f981..c5f56bb 100644
--- a/README.md
+++ b/README.md
@@ -372,6 +372,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`