diff --git a/.changeset/forty-islands-bow.md b/.changeset/forty-islands-bow.md
new file mode 100644
index 00000000..56410189
--- /dev/null
+++ b/.changeset/forty-islands-bow.md
@@ -0,0 +1,5 @@
+---
+"react-mentions": patch
+---
+
+Added support of adding mentions when using package in the shadow dom
diff --git a/src/MentionsInput.js b/src/MentionsInput.js
index 68e6b73d..0c91d0d4 100755
--- a/src/MentionsInput.js
+++ b/src/MentionsInput.js
@@ -145,6 +145,7 @@ class MentionsInput extends React.Component {
     document.addEventListener('copy', this.handleCopy)
     document.addEventListener('cut', this.handleCut)
     document.addEventListener('paste', this.handlePaste)
+    window.addEventListener('trigger-shadow-root-input-onSelect', this.handleSelect)
 
     this.updateSuggestionsPosition()
   }
@@ -172,6 +173,7 @@ class MentionsInput extends React.Component {
     document.removeEventListener('copy', this.handleCopy)
     document.removeEventListener('cut', this.handleCut)
     document.removeEventListener('paste', this.handlePaste)
+    window.addEventListener('trigger-shadow-root-input-onSelect', this.handleSelect)
   }
 
   render() {
@@ -586,7 +588,11 @@ class MentionsInput extends React.Component {
   }
 
   // Handle input element's select event
-  handleSelect = (ev) => {
+  handleSelect = (event) => {
+    // from shadow dom fire custom event and pass event to handleSelect via event.detail.event
+    // in shadow dom onSelect event does not work
+    // https://it.javascript.info/shadow-dom-events
+    const ev = event.detail ? event.detail.event : event
     // keep track of selection range / caret position
     this.setState({
       selectionStart: ev.target.selectionStart,