From 66ec72c48bf8a668d0da90c6e9b9a10e10dd3cf9 Mon Sep 17 00:00:00 2001
From: Trevor Manz <trevor.j.manz@gmail.com>
Date: Wed, 24 Jul 2024 23:32:12 -0400
Subject: [PATCH] fix: Apply styles to ShadowDOM

---
 src/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index f899439..3309df1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -28,6 +28,13 @@ export interface VizarrViewer {
 }
 
 export function createViewer(element: HTMLElement, options: { menuOpen?: boolean } = {}): Promise<VizarrViewer> {
+  const shadowRoot = element.attachShadow({ mode: "open" });
+  const link = Object.assign(document.createElement("link"), {
+    rel: "stylesheet",
+    href: new URL(/* @vite-ignore */ "index.css", import.meta.url).href,
+  });
+  shadowRoot.appendChild(link);
+
   const ref = React.createRef<VizarrViewer>();
   const emitter = typedEmitter<Events>();
   const viewStateAtom = atom<ViewState | undefined>(undefined);
@@ -66,7 +73,7 @@ export function createViewer(element: HTMLElement, options: { menuOpen?: boolean
       </ViewStateContext.Provider>
     );
   }
-  let root = ReactDOM.createRoot(element);
+  let root = ReactDOM.createRoot(shadowRoot);
   root.render(
     <Provider>
       <App />