From 3c62a7987797137cb973de36252723c24ed793fd Mon Sep 17 00:00:00 2001
From: Mihaly Lengyel <mihaly@lengyel.tech>
Date: Fri, 29 Sep 2023 12:15:09 +0200
Subject: [PATCH] fix: only add shadow root if there is none attached

---
 CHANGELOG.md                         | 4 ++++
 lib/build/index2.js                  | 6 +++++-
 lib/ts/components/featureWrapper.tsx | 7 ++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index da7a4f26a..4aea03716 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+### Fixes
+
+-   Fixed shadow dom issue in nextjs dev mode by checking if a shadow root is already attached to the div before creating one.
+
 ### Example changes
 
 -   Updated dev/start script in netlify example
diff --git a/lib/build/index2.js b/lib/build/index2.js
index c43e59660..2b9fda041 100644
--- a/lib/build/index2.js
+++ b/lib/build/index2.js
@@ -156,7 +156,11 @@ function WithShadowDom(_a) {
             if (rootDiv.current) {
                 // defaults from react-shadow
                 setShadowRoot(function (os) {
-                    return os || rootDiv.current.attachShadow({ mode: "open", delegatesFocus: false });
+                    return (
+                        os ||
+                        rootDiv.current.shadowRoot ||
+                        rootDiv.current.attachShadow({ mode: "open", delegatesFocus: false })
+                    );
                 });
             }
         },
diff --git a/lib/ts/components/featureWrapper.tsx b/lib/ts/components/featureWrapper.tsx
index 5d857c783..6a4366767 100644
--- a/lib/ts/components/featureWrapper.tsx
+++ b/lib/ts/components/featureWrapper.tsx
@@ -94,7 +94,12 @@ function WithShadowDom({ children }: PropsWithChildren<unknown>) {
     useEffect(() => {
         if (rootDiv.current) {
             // defaults from react-shadow
-            setShadowRoot((os) => os || rootDiv.current!.attachShadow({ mode: "open", delegatesFocus: false }));
+            setShadowRoot(
+                (os) =>
+                    os ||
+                    rootDiv.current!.shadowRoot ||
+                    rootDiv.current!.attachShadow({ mode: "open", delegatesFocus: false })
+            );
         }
     }, [rootDiv]);