attempt to switch to shadow dom

Krastanov · Krastanov · commit de6e329e209a · 2025-12-06T17:12:37.000-05:00
diff --git a/src/AnythingLLMDocs.jl b/src/AnythingLLMDocs.jl
@@ -322,62 +322,57 @@ function embed_script(cfg::AnythingLLMConfig, embed_uuid::String; embed_options=
         ["$(k)=\"$(escape_attr(v))\"" for (k, v) in attrs],
         "\n      ",
     )
-    return string(
-        """
+    return string("""
 <script>
-// Render the AnythingLLM embed inside a sandboxed iframe to avoid clashing with Documenter and require.js.
+// Render the AnythingLLM embed inside an isolated shadow DOM to avoid clashes with Documenter/require.js.
 (function() {
-  const injectEmbed = () => {
-    if (document.getElementById("anythingllm-embed-frame")) return;
-
-    const iframe = document.createElement("iframe");
-    iframe.id = "anythingllm-embed-frame";
-    iframe.title = "AnythingLLM chat";
-    iframe.style.position = "fixed";
-    iframe.style.bottom = "0";
-    iframe.style.right = "0";
-    iframe.style.width = "80px";
-    iframe.style.height = "80px";
-    iframe.style.maxWidth = "min(90vw, 80px)";
-    iframe.style.maxHeight = "min(90vh, 80px)";
-    iframe.style.border = "none";
-    iframe.style.zIndex = "2147483000";
-    iframe.style.background = "transparent";
-    iframe.sandbox = "allow-same-origin allow-scripts allow-popups allow-forms allow-modals";
-    iframe.loading = "lazy";
-
-    const html = `
-<!doctype html>
-<html>
-  <head>
-    <style>
-      html, body { margin: 0; padding: 0; overflow: hidden; background: transparent; }
-    </style>
-  </head>
-  <body>
-    <script
-      """,
-        attr_lines,
+  const hostId = "anythingllm-embed-shadow-host";
+  if (document.getElementById(hostId)) return;
+
+  const host = document.createElement("div");
+  host.id = hostId;
+  host.style.position = "fixed";
+  host.style.bottom = "0";
+  host.style.right = "0";
+  host.style.zIndex = "2147483000";
+  host.style.pointerEvents = "none"; // allow clicks only through the shadow content
+  document.body.appendChild(host);
+
+  const shadow = host.attachShadow({ mode: "open" });
+
+  const style = document.createElement("style");
+  style.textContent = `
+    :host { all: initial; }
+    .anythingllm-shell {
+      position: relative;
+      width: min(90vw, 440px);
+      height: min(90vh, 720px);
+      pointer-events: none;
+    }
+    .anythingllm-shell > * {
+      pointer-events: auto;
+    }
+  `;
+  shadow.appendChild(style);
+
+  const shell = document.createElement("div");
+  shell.className = "anythingllm-shell";
+  shadow.appendChild(shell);
+
+  const script = document.createElement("script");
+  """)
+        *
+        join(["script.setAttribute(\"$(escape_attr(k))\", \"$(escape_attr(v))\");" for (k, v) in attrs], "\n  ")
+        *
         """
-      src=""",
-        script_src,
-        """>
-    <\\/script>
-  </body>
-</html>`;
-    iframe.srcdoc = html;
-    document.body.appendChild(iframe);
-  };
-
-  if (document.readyState === "complete" || document.readyState === "interactive") {
-    injectEmbed();
-  } else {
-    window.addEventListener("DOMContentLoaded", injectEmbed);
-  }
+  script.src = \"""" *
+        script_src *
+        """\";
+  script.async = true;
+  shell.appendChild(script);
 })();
 </script>
-""",
-    )
+"""
 end
 
 function integrate_anythingllm(
diff --git a/test/runtests.jl b/test/runtests.jl
@@ -31,7 +31,7 @@ end
     )
     @test length(assets) == 1
     @test assets[1] isa RawHTMLHeadContent
-    @test occursin("anythingllm-embed-frame", String(assets[1].content))
+    @test occursin("anythingllm-embed-shadow-host", String(assets[1].content))
 end
 
 @testset "Aqua" begin

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ end`
`31`	`31`	`)`
`32`	`32`	`@test length(assets) == 1`
`33`	`33`	`@test assets[1] isa RawHTMLHeadContent`
`34`		`- @test occursin("anythingllm-embed-frame", String(assets[1].content))`
	`34`	`+ @test occursin("anythingllm-embed-shadow-host", String(assets[1].content))`
`35`	`35`	`end`
`36`	`36`
`37`	`37`	`@testset "Aqua" begin`