From a8c1790780de4ffb5800f8fea844f6ca2ecd3256 Mon Sep 17 00:00:00 2001
From: xxvvii <xxvvii@gmail.com>
Date: Wed, 22 Jan 2025 15:33:07 +0800
Subject: [PATCH 1/5] Add pointer events and focus handling for apps run in a
 Shadow DOM

---
 crates/eframe/Cargo.toml            |  1 +
 crates/eframe/src/web/events.rs     | 17 ++++++++++++-----
 crates/eframe/src/web/mod.rs        | 20 ++++++++++++--------
 crates/eframe/src/web/text_agent.rs | 15 +++++++++++++--
 crates/eframe/src/web/web_runner.rs |  2 +-
 5 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/crates/eframe/Cargo.toml b/crates/eframe/Cargo.toml
index c07dc9d0d3a1..44d2caedf5fc 100644
--- a/crates/eframe/Cargo.toml
+++ b/crates/eframe/Cargo.toml
@@ -225,6 +225,7 @@ web-sys = { workspace = true, features = [
   "ResizeObserverEntry",
   "ResizeObserverOptions",
   "ResizeObserverSize",
+  "ShadowRoot",
   "Storage",
   "Touch",
   "TouchEvent",
diff --git a/crates/eframe/src/web/events.rs b/crates/eframe/src/web/events.rs
index 414e5be23837..242bac30d435 100644
--- a/crates/eframe/src/web/events.rs
+++ b/crates/eframe/src/web/events.rs
@@ -4,7 +4,7 @@ use super::{
     push_touches, text_from_keyboard_event, theme_from_dark_mode, translate_key, AppRunner,
     Closure, JsCast, JsValue, WebRunner,
 };
-use web_sys::EventTarget;
+use web_sys::{Document, EventTarget, ShadowRoot};
 
 // TODO(emilk): there are more calls to `prevent_default` and `stop_propagation`
 // than what is probably needed.
@@ -510,10 +510,17 @@ fn install_pointerup(runner_ref: &WebRunner, target: &EventTarget) -> Result<(),
 /// Returns true if the cursor is above the canvas, or if we're dragging something.
 /// Pass in the position in browser viewport coordinates (usually event.clientX/Y).
 fn is_interested_in_pointer_event(runner: &AppRunner, pos: egui::Pos2) -> bool {
-    let document = web_sys::window().unwrap().document().unwrap();
-    let is_hovering_canvas = document
-        .element_from_point(pos.x, pos.y)
-        .is_some_and(|element| element.eq(runner.canvas()));
+    let root_node = runner.canvas().get_root_node();
+
+    let element_at_point = if let Some(document) = root_node.dyn_ref::<Document>() {
+        document.element_from_point(pos.x, pos.y)
+    } else if let Some(shadow) = root_node.dyn_ref::<ShadowRoot>() {
+        shadow.element_from_point(pos.x, pos.y)
+    } else {
+        None
+    };
+
+    let is_hovering_canvas = element_at_point.is_some_and(|element| element.eq(runner.canvas()));
     let is_pointer_down = runner
         .egui_ctx()
         .input(|i| i.pointer.any_down() || i.any_touches());
diff --git a/crates/eframe/src/web/mod.rs b/crates/eframe/src/web/mod.rs
index 827feb9244fe..236bf96bbad0 100644
--- a/crates/eframe/src/web/mod.rs
+++ b/crates/eframe/src/web/mod.rs
@@ -41,7 +41,7 @@ pub(crate) type ActiveWebPainter = web_painter_wgpu::WebPainterWgpu;
 pub use backend::*;
 
 use wasm_bindgen::prelude::*;
-use web_sys::MediaQueryList;
+use web_sys::{Document, MediaQueryList, Node};
 
 use input::{
     button_from_mouse_event, modifiers_from_kb_event, modifiers_from_mouse_event,
@@ -61,18 +61,22 @@ pub(crate) fn string_from_js_value(value: &JsValue) -> String {
 /// - `<a>`/`<area>` with an `href` attribute
 /// - `<input>`/`<select>`/`<textarea>`/`<button>` which aren't `disabled`
 /// - any other element with a `tabindex` attribute
-pub(crate) fn focused_element() -> Option<web_sys::Element> {
-    web_sys::window()?
-        .document()?
-        .active_element()?
-        .dyn_into()
-        .ok()
+pub(crate) fn focused_element(root: Node) -> Option<web_sys::Element> {
+    if let Some(document) = root.dyn_ref::<Document>() {
+        document.active_element()
+    } else if let Some(shadow) = root.dyn_ref::<web_sys::ShadowRoot>() {
+        shadow.active_element()
+    } else {
+        None
+    }
 }
 
 pub(crate) fn has_focus<T: JsCast>(element: &T) -> bool {
     fn try_has_focus<T: JsCast>(element: &T) -> Option<bool> {
         let element = element.dyn_ref::<web_sys::Element>()?;
-        let focused_element = focused_element()?;
+        let root = element.get_root_node();
+
+        let focused_element = focused_element(root)?;
         Some(element == &focused_element)
     }
     try_has_focus(element).unwrap_or(false)
diff --git a/crates/eframe/src/web/text_agent.rs b/crates/eframe/src/web/text_agent.rs
index f0eb67d60e83..4d26f6a9da10 100644
--- a/crates/eframe/src/web/text_agent.rs
+++ b/crates/eframe/src/web/text_agent.rs
@@ -4,6 +4,7 @@
 use std::cell::Cell;
 
 use wasm_bindgen::prelude::*;
+use web_sys::{Document, Node};
 
 use super::{AppRunner, WebRunner};
 
@@ -14,7 +15,7 @@ pub struct TextAgent {
 
 impl TextAgent {
     /// Attach the agent to the document.
-    pub fn attach(runner_ref: &WebRunner) -> Result<Self, JsValue> {
+    pub fn attach(runner_ref: &WebRunner, root: Node) -> Result<Self, JsValue> {
         let document = web_sys::window().unwrap().document().unwrap();
 
         // create an `<input>` element
@@ -36,7 +37,17 @@ impl TextAgent {
         style.set_property("position", "absolute")?;
         style.set_property("top", "0")?;
         style.set_property("left", "0")?;
-        document.body().unwrap().append_child(&input)?;
+
+        if root.has_type::<Document>() {
+            // root object is a document, append to its body
+            root.dyn_into::<Document>()?
+                .body()
+                .unwrap()
+                .append_child(&input)?;
+        } else {
+            // append input into root directly
+            root.append_child(&input)?;
+        }
 
         // attach event listeners
 
diff --git a/crates/eframe/src/web/web_runner.rs b/crates/eframe/src/web/web_runner.rs
index 6cbc371f34cf..61afb5a10333 100644
--- a/crates/eframe/src/web/web_runner.rs
+++ b/crates/eframe/src/web/web_runner.rs
@@ -58,7 +58,7 @@ impl WebRunner {
     ) -> Result<(), JsValue> {
         self.destroy();
 
-        let text_agent = TextAgent::attach(self)?;
+        let text_agent = TextAgent::attach(self, canvas.get_root_node())?;
 
         let runner = AppRunner::new(canvas, web_options, app_creator, text_agent).await?;
 

From dd47a2292a4aaa26d2a651db3d4608b279b13fca Mon Sep 17 00:00:00 2001
From: Aiden <xxvvii@gmail.com>
Date: Tue, 11 Feb 2025 17:43:37 +0800
Subject: [PATCH 2/5] Update events.rs: fix duplicated import of EventTarget

---
 crates/eframe/src/web/events.rs | 2 --
 1 file changed, 2 deletions(-)

diff --git a/crates/eframe/src/web/events.rs b/crates/eframe/src/web/events.rs
index a66c8448e91f..74d36eefcae8 100644
--- a/crates/eframe/src/web/events.rs
+++ b/crates/eframe/src/web/events.rs
@@ -1,5 +1,3 @@
-use web_sys::EventTarget;
-
 use crate::web::string_from_js_value;
 
 use super::{

From be650524a5fc574f49fa030a8a0aa3a2b27e3dc6 Mon Sep 17 00:00:00 2001
From: Aiden <xxvvii@gmail.com>
Date: Tue, 11 Feb 2025 17:58:06 +0800
Subject: [PATCH 3/5] Update mod.rs: use reference of Node

---
 crates/eframe/src/web/mod.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/eframe/src/web/mod.rs b/crates/eframe/src/web/mod.rs
index bf65ef20bccc..bebb0ad084dd 100644
--- a/crates/eframe/src/web/mod.rs
+++ b/crates/eframe/src/web/mod.rs
@@ -64,7 +64,7 @@ pub(crate) fn string_from_js_value(value: &JsValue) -> String {
 /// - `<a>`/`<area>` with an `href` attribute
 /// - `<input>`/`<select>`/`<textarea>`/`<button>` which aren't `disabled`
 /// - any other element with a `tabindex` attribute
-pub(crate) fn focused_element(root: Node) -> Option<web_sys::Element> {
+pub(crate) fn focused_element(root: &Node) -> Option<web_sys::Element> {
     if let Some(document) = root.dyn_ref::<Document>() {
         document.active_element()
     } else if let Some(shadow) = root.dyn_ref::<web_sys::ShadowRoot>() {

From 91d0697425f8de47cb11e40c82271eac71f49279 Mon Sep 17 00:00:00 2001
From: xxvvii <xxvvii@gmail.com>
Date: Tue, 11 Feb 2025 20:04:46 +0800
Subject: [PATCH 4/5] Update mod.rs: use reference of Node

---
 crates/eframe/src/web/mod.rs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/crates/eframe/src/web/mod.rs b/crates/eframe/src/web/mod.rs
index bebb0ad084dd..a637e05b7837 100644
--- a/crates/eframe/src/web/mod.rs
+++ b/crates/eframe/src/web/mod.rs
@@ -64,7 +64,7 @@ pub(crate) fn string_from_js_value(value: &JsValue) -> String {
 /// - `<a>`/`<area>` with an `href` attribute
 /// - `<input>`/`<select>`/`<textarea>`/`<button>` which aren't `disabled`
 /// - any other element with a `tabindex` attribute
-pub(crate) fn focused_element(root: &Node) -> Option<web_sys::Element> {
+pub(crate) fn focused_element(root: Node) -> Option<web_sys::Element> {
     if let Some(document) = root.dyn_ref::<Document>() {
         document.active_element()
     } else if let Some(shadow) = root.dyn_ref::<web_sys::ShadowRoot>() {
@@ -79,7 +79,7 @@ pub(crate) fn has_focus<T: JsCast>(element: &T) -> bool {
         let element = element.dyn_ref::<web_sys::Element>()?;
         let root = element.get_root_node();
 
-        let focused_element = focused_element(root)?;
+        let focused_element = focused_element(&root)?;
         Some(element == &focused_element)
     }
     try_has_focus(element).unwrap_or(false)

From 28dd2f455e99fe1ad6ecfe3b9cc1804c85e9a9dd Mon Sep 17 00:00:00 2001
From: xxvvii <xxvvii@gmail.com>
Date: Tue, 11 Feb 2025 20:10:24 +0800
Subject: [PATCH 5/5] Update mod.rs: use reference of Node

---
 crates/eframe/src/web/mod.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/eframe/src/web/mod.rs b/crates/eframe/src/web/mod.rs
index a637e05b7837..c67fa69e61eb 100644
--- a/crates/eframe/src/web/mod.rs
+++ b/crates/eframe/src/web/mod.rs
@@ -64,7 +64,7 @@ pub(crate) fn string_from_js_value(value: &JsValue) -> String {
 /// - `<a>`/`<area>` with an `href` attribute
 /// - `<input>`/`<select>`/`<textarea>`/`<button>` which aren't `disabled`
 /// - any other element with a `tabindex` attribute
-pub(crate) fn focused_element(root: Node) -> Option<web_sys::Element> {
+pub(crate) fn focused_element(root: &Node) -> Option<web_sys::Element> {
     if let Some(document) = root.dyn_ref::<Document>() {
         document.active_element()
     } else if let Some(shadow) = root.dyn_ref::<web_sys::ShadowRoot>() {