diff --git a/web-client/iron-remote-gui/src/iron-remote-gui.svelte b/web-client/iron-remote-gui/src/iron-remote-gui.svelte
index 8cc2ffe6..af261776 100644
--- a/web-client/iron-remote-gui/src/iron-remote-gui.svelte
+++ b/web-client/iron-remote-gui/src/iron-remote-gui.svelte
@@ -1,4 +1,17 @@
-<svelte:options customElement={{ tag: 'iron-remote-gui', shadow: 'none' }} />
+<svelte:options
+    customElement={{
+        tag: 'iron-remote-gui',
+        shadow: 'none',
+        extend: (elementConstructor) => {
+            return class extends elementConstructor {
+                constructor() {
+                    super();
+                    this.attachShadow({ mode: 'open', delegatesFocus: true });
+                }
+            };
+        },
+    }}
+/>
 
 <script lang="ts">
     import { onMount } from 'svelte';
@@ -28,8 +41,7 @@
             capturingInputs: ${document.activeElement === canvas}
             current active element: ${document.activeElement}
         `);
-
-        return document.activeElement === canvas;
+        return document.activeElement?.shadowRoot?.firstElementChild === inner;
     };
 
     let inner: HTMLDivElement;