From 9bf0d4f7db7f6eaeb428b648e08d678791ed409b Mon Sep 17 00:00:00 2001
From: Leo <20469933+leoc4e@users.noreply.github.com>
Date: Mon, 12 Sep 2022 17:36:50 +0900
Subject: [PATCH] [fixed]: css class added to root document in iframe

---
 docs/index.md                 |  4 ++--
 src/components/ModalPortal.js | 22 ++++++++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 4e8a296e..99f4dcbd 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -90,7 +90,7 @@ import ReactModal from 'react-modal';
 
   bodyOpenClassName={
     "ReactModal__Body--open"
-  /* String className to be applied to the document.body
+  /* String className to be applied to the modal ownerDocument.body
      (must be a constant string).
      This attribute when set as `null` doesn't add any class
      to document.body.
@@ -98,7 +98,7 @@ import ReactModal from 'react-modal';
 
   htmlOpenClassName={
     "ReactModal__Html--open"
-  /* String className to be applied to the document.html
+  /* String className to be applied to the modal ownerDocument.html
      (must be a constant string).
      This attribute is `null` by default.
      See the `Styles` section for more details. */}
diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
index 35e9837e..8f673af1 100644
--- a/src/components/ModalPortal.js
+++ b/src/components/ModalPortal.js
@@ -43,6 +43,7 @@ export default class ModalPortal extends Component {
     }),
     className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     overlayClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    parentSelector: PropTypes.func,
     bodyOpenClassName: PropTypes.string,
     htmlOpenClassName: PropTypes.string,
     ariaHideApp: PropTypes.bool,
@@ -149,15 +150,19 @@ export default class ModalPortal extends Component {
       appElement,
       ariaHideApp,
       htmlOpenClassName,
-      bodyOpenClassName
+      bodyOpenClassName,
+      parentSelector
     } = this.props;
 
+    const parentDocument =
+      (parentSelector && parentSelector().ownerDocument) || document;
+
     // Add classes.
-    bodyOpenClassName && classList.add(document.body, bodyOpenClassName);
+    bodyOpenClassName && classList.add(parentDocument.body, bodyOpenClassName);
 
     htmlOpenClassName &&
       classList.add(
-        document.getElementsByTagName("html")[0],
+        parentDocument.getElementsByTagName("html")[0],
         htmlOpenClassName
       );
 
@@ -174,15 +179,20 @@ export default class ModalPortal extends Component {
       appElement,
       ariaHideApp,
       htmlOpenClassName,
-      bodyOpenClassName
+      bodyOpenClassName,
+      parentSelector
     } = this.props;
 
+    const parentDocument =
+      (parentSelector && parentSelector().ownerDocument) || document;
+
     // Remove classes.
-    bodyOpenClassName && classList.remove(document.body, bodyOpenClassName);
+    bodyOpenClassName &&
+      classList.remove(parentDocument.body, bodyOpenClassName);
 
     htmlOpenClassName &&
       classList.remove(
-        document.getElementsByTagName("html")[0],
+        parentDocument.getElementsByTagName("html")[0],
         htmlOpenClassName
       );