fix client.js

Author: srzeszut

assets/client/client.js

@@ -38,10 +38,37 @@ window.document.addEventListener('DOMContentLoaded', async () => {
       debugChannel.push('pong', resp);
     });
 
-    initElementInspection({ baseURL, debugChannel, socketID: mainSocketID });
-    initTooltip();
-    initDebugMenu(metaTag, sessionURL, debugChannel);
-    initHighlight(debugChannel);
+    const shadowHost = document.createElement('div');
+    shadowHost.style.position = 'absolute';
+    shadowHost.style.width = '0px';
+    shadowHost.style.height = '0px';
+    shadowHost.style.left = '0px';
+    shadowHost.style.top = '0px';
+    shadowHost.style.zIndex = '2147483647';
+    document.body.appendChild(shadowHost);
+
+    const mode = metaTag.getAttribute('e2e') === 'true' ? 'open' : 'closed';
+    const shadowRoot = shadowHost.attachShadow({ mode });
+
+    const cssLink = document.createElement('link');
+    cssLink.rel = 'stylesheet';
+    cssLink.href = `${baseURL}/assets/live_debugger/client.css`;
+    shadowRoot.appendChild(cssLink);
+
+    const { debugButton } = initDebugMenu(
+      metaTag,
+      sessionURL,
+      debugChannel,
+      shadowRoot
+    );
+    initElementInspection({
+      baseURL,
+      debugChannel,
+      socketID: mainSocketID,
+      debugButton,
+    });
+    initTooltip(shadowRoot);
+    initHighlight(debugChannel, shadowRoot);
 
     document.addEventListener('lvdbg:tour', (e) => {
       const { command, ...payload } = e.detail;