From bc24ea45a4c2a077a4e375218aa397f27f83350a Mon Sep 17 00:00:00 2001
From: Aaron Klinker <aaronklinker1@gmail.com>
Date: Sat, 17 Feb 2024 09:20:15 -0600
Subject: [PATCH] docs: Add wrapper div to react's `createShadowRootUi` example

Related to #456.
---
 docs/guide/content-script-ui.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/guide/content-script-ui.md b/docs/guide/content-script-ui.md
index 93c6f99a..f6d80a8d 100644
--- a/docs/guide/content-script-ui.md
+++ b/docs/guide/content-script-ui.md
@@ -253,8 +253,12 @@ export default defineContentScript({
       name: 'example-ui',
       position: 'inline',
       onMount: (container) => {
+        // Container is a body, and React warns when creating a root on the body, so create a wrapper div
+        const app = document.createElement('div');
+        container.append(app);
+
         // Create a root on the UI container and render a component
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(app);
         root.render(<App />);
         return root;
       },