chore(collection/presentation): render with shadow DOM

apps/client/src/widgets/collections/presentation/index.tsx

@@ -1,10 +1,10 @@
 import { ViewModeProps } from "../interface";
-import FNote from "../../../entities/fnote";
 import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
 import Reveal from "reveal.js";
-import "reveal.js/dist/reveal.css";
+import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw";
-import "reveal.js/dist/theme/black.css";
+import slideThemeStylesheet from "reveal.js/dist/theme/black.css?raw";
 import { buildPresentationModel, PresentationModel, PresentationSlideModel } from "./model";
+import ShadowDom from "../../react/ShadowDom";
 
 export default function PresentationView({ note }: ViewModeProps<{}>) {
     const [ presentation, setPresentation ] = useState<PresentationModel>();
@@ -14,7 +14,11 @@ export default function PresentationView({ note }: ViewModeProps<{}>) {
     }, [ note ]);
 
     return presentation && (
+        <ShadowDom className="presentation-container" style={{ width: "100%", height: "100%" }}>
+            <style>{slideBaseStylesheet}</style>
+            <style>{slideThemeStylesheet}</style>
             <Presentation presentation={presentation} />
+        </ShadowDom>
     )
 }
 

apps/client/src/widgets/react/ShadowDom.tsx

@@ -0,0 +1,26 @@
+import { ComponentChildren, HTMLAttributes, JSX, render } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+
+interface ShadowDomProps extends HTMLAttributes<HTMLDivElement> {
+    children: ComponentChildren;
+}
+
+export default function ShadowDom({ children, ...containerProps }: ShadowDomProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [ shadowRoot, setShadowRoot ] = useState<ShadowRoot | null>(null);
+
+    // Create the shadow root.
+    useEffect(() => {
+        if (!containerRef.current || shadowRoot) return;
+        const shadow = containerRef.current.attachShadow({ mode: "open" });
+        setShadowRoot(shadow);
+    }, [ shadowRoot ]);
+
+    // Render the child elements.
+    useEffect(() => {
+        if (!shadowRoot) return;
+        render(<>{children}</>, shadowRoot);
+    }, [ shadowRoot, children ]);
+
+    return <div ref={containerRef} {...containerProps} />
+}