fix: Apply styles to ShadowDOM

hms-dbmi · Jul 25, 2024 · 66ec72c · 66ec72c
1 parent 7fb37c1
commit 66ec72c
Showing 1 changed file with 8 additions and 1 deletion.
diff --git 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 />