feat: Allow giving a css selector where the sandboxes should be stored (

#358)
QwikDev · Apr 12, 2023 · da44d00 · da44d00 · vercel · Apr 12, 2023
1 parent d316982
commit da44d00
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/lib/main/snippet.ts b/src/lib/main/snippet.ts
@@ -82,7 +82,13 @@ export function snippet(
       libPath +
       'partytown-' +
       (isAtomics ? 'atomics.js?v=_VERSION_' : 'sandbox-sw.html?' + Date.now());
-    doc.body.appendChild(sandbox);
+    let sandboxParent = doc.querySelector(config?.sandboxParent ?? 'body');
+    if(!sandboxParent) {
+      console.warn(`Partytown sandboxParent element was not found on the page!`);
+      sandboxParent = doc.body
+    }
+
+    sandboxParent.appendChild(sandbox);
   }
 
   function fallback(i?: number, script?: HTMLScriptElement) {

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -419,6 +419,11 @@ export interface PartytownConfig {
    * https://partytown.builder.io/forwarding-events
    */
   forward?: PartytownForwardProperty[];
+  /**
+   * The css selector where the sandbox should be placed.
+   * Default: body
+   */
+  sandboxParent?: string;
   mainWindowAccessors?: string[];
   /**
    * Rarely, a script will add a named function to the global scope with the