bug: disable iframes within shadowdom during dnd

packages/dockview-core/src/dom.ts

@@ -112,8 +112,11 @@ export function isAncestor(
     return false;
 }
 
-export function getElementsByTagName(tag: string): HTMLElement[] {
-    return Array.prototype.slice.call(document.getElementsByTagName(tag), 0);
+export function getElementsByTagName(
+    tag: string,
+    document: ParentNode
+): HTMLElement[] {
+    return Array.prototype.slice.call(document.querySelectorAll(tag), 0);
 }
 
 export interface IFocusTracker extends IDisposable {
@@ -288,10 +291,29 @@ export function addTestId(element: HTMLElement, id: string): void {
     element.setAttribute('data-testid', id);
 }
 
-export function disableIframePointEvents() {
+export function disableIframePointEvents(rootNode: ParentNode = document) {
+    const includeShadowDom = true;
+
+    const shadowRoots: ShadowRoot[] = [];
+
+    if (includeShadowDom) {
+        const items = rootNode.querySelectorAll('*');
+
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.shadowRoot) {
+                shadowRoots.push(item.shadowRoot);
+            }
+        }
+    }
+
     const iframes: HTMLElement[] = [
-        ...getElementsByTagName('iframe'),
-        ...getElementsByTagName('webview'),
+        ...getElementsByTagName('iframe', rootNode),
+        ...getElementsByTagName('webview', rootNode),
+        ...shadowRoots.flatMap((root) => [
+            ...getElementsByTagName('iframe', root),
+            ...getElementsByTagName('webview', root),
+        ]),
     ];
 
     const original = new WeakMap<HTMLElement, string>(); // don't hold onto HTMLElement references longer than required

packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx

@@ -8,6 +8,7 @@ import {
     DockviewTheme,
 } from 'dockview';
 import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
 import './app.scss';
 import { defaultConfig } from './defaultLayout';
 import { GridActions } from './gridActions';
@@ -31,6 +32,20 @@ const Option = (props: {
     );
 };
 
+const ShadowIframe = (props: IDockviewPanelProps) => {
+    return (
+        <iframe
+            onMouseDown={() => {
+                if (!props.api.isActive) {
+                    props.api.setActive();
+                }
+            }}
+            style={{ border: 'none', width: '100%', height: '100%' }}
+            src="https://dockview.dev"
+        />
+    );
+};
+
 const components = {
     default: (props: IDockviewPanelProps) => {
         const isDebug = React.useContext(DebugContext);
@@ -110,13 +125,41 @@ const components = {
                     }
                 }}
                 style={{
+                    border: 'none',
                     width: '100%',
                     height: '100%',
                 }}
                 src="https://dockview.dev"
             />
         );
     },
+    shadowDom: (props: IDockviewPanelProps) => {
+        const ref = React.useRef<HTMLDivElement>(null);
+
+        React.useEffect(() => {
+            if (!ref.current) {
+                return;
+            }
+
+            const shadow = ref.current.attachShadow({
+                mode: 'open',
+            });
+
+            const shadowRoot = document.createElement('div');
+            shadowRoot.style.height = '100%';
+            shadow.appendChild(shadowRoot);
+
+            const root = ReactDOM.createRoot(shadowRoot);
+
+            root.render(<ShadowIframe {...props} />);
+
+            return () => {
+                root.unmount();
+            };
+        }, []);
+
+        return <div style={{ height: '100%' }} ref={ref}></div>;
+    },
 };
 
 const headerComponents = {