diff --git a/src/index.tsx b/src/index.tsx
index 080c7615c..fe5a0f3b8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -54,6 +54,11 @@ export interface ReactCodeMirrorProps
    * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.
    */
   extensions?: Extension[];
+  /**
+   * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.
+   * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)
+   */
+  root?: ShadowRoot | Document;
 }
 
 export interface ReactCodeMirrorRef {
@@ -82,11 +87,13 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
     placeholder,
     indentWithTab,
     editable,
+    root,
     ...other
   } = props;
   const editor = useRef<HTMLDivElement>(null);
   const { state, view, container, setContainer } = useCodeMirror({
     container: editor.current,
+    root,
     value,
     autoFocus,
     theme,
diff --git a/src/useCodeMirror.ts b/src/useCodeMirror.ts
index c3e3b19bf..c7edf7dc5 100644
--- a/src/useCodeMirror.ts
+++ b/src/useCodeMirror.ts
@@ -30,6 +30,7 @@ export function useCodeMirror(props: UseCodeMirror) {
     editable = true,
     indentWithTab = true,
     basicSetup = true,
+    root,
   } = props;
   const [container, setContainer] = useState(props.container);
   const [view, setView] = useState<EditorView>();
@@ -86,6 +87,7 @@ export function useCodeMirror(props: UseCodeMirror) {
         const viewCurrent = new EditorView({
           state: stateCurrent,
           parent: container as any,
+          root,
         });
         setView(viewCurrent);
       }