Remove all shadowRoot

app.py

@@ -207,7 +207,7 @@ def load_js(name):
         return f"""
 function (x)
 {{ 
-    let frame=document.querySelector("gradio-app").shadowRoot.querySelector("#sdinfframe").contentWindow;
+    let frame=document.querySelector("gradio-app").querySelector("#sdinfframe").contentWindow;
     frame.postMessage(["click","{name}"], "*");
     return x;
 }}

index.html

@@ -102,9 +102,9 @@ async def draw_canvas() -> None:
 
 async def draw_canvas_func(event):
     try:
-        width=parent.document.querySelector("gradio-app").shadowRoot.querySelector("#canvas_width input").value
-        height=parent.document.querySelector("gradio-app").shadowRoot.querySelector("#canvas_height input").value
-        selection_size=parent.document.querySelector("gradio-app").shadowRoot.querySelector("#selection_size input").value
+        width=parent.document.querySelector("gradio-app").querySelector("#canvas_width input").value
+        height=parent.document.querySelector("gradio-app").querySelector("#canvas_height input").value
+        selection_size=parent.document.querySelector("gradio-app").querySelector("#selection_size input").value
     except:
         width=1024
         height=768

js/outpaint.js

@@ -4,12 +4,12 @@ function(a){
         console.log("setup outpaint here");
         window.my_observe_outpaint = new MutationObserver(function (event) {
             console.log(event);
-            let app=document.querySelector("gradio-app").shadowRoot;
+            let app=document.querySelector("gradio-app");
             let frame=app.querySelector("#sdinfframe").contentWindow;
-            var str=document.querySelector("gradio-app").shadowRoot.querySelector("#output textarea").value;
+            var str=document.querySelector("gradio-app").querySelector("#output textarea").value;
             frame.postMessage(["outpaint", str], "*");
         });
-        window.my_observe_outpaint_target=document.querySelector("gradio-app").shadowRoot.querySelector("#output span")
+        window.my_observe_outpaint_target=document.querySelector("gradio-app").querySelector("#output span")
         window.my_observe_outpaint.observe(window.my_observe_outpaint_target, {
             attributes: false, 
             subtree: true,
@@ -19,12 +19,12 @@ function(a){
         window.addEventListener("message", function(e){
             if(e.data[0]=="transfer")
             {
-                document.querySelector("gradio-app").shadowRoot.querySelector("#input textarea").value=e.data[1];
-                document.querySelector("gradio-app").shadowRoot.querySelector("#proceed").click();
+                document.querySelector("gradio-app").querySelector("#input textarea").value=e.data[1];
+                document.querySelector("gradio-app").querySelector("#proceed").click();
             }
         });
     }
-    let app=document.querySelector("gradio-app").shadowRoot;
+    let app=document.querySelector("gradio-app");
     let frame=app.querySelector("#sdinfframe").contentWindow;
     frame.postMessage(["transfer"],"*")
     return a;

js/proceed.js

@@ -7,7 +7,7 @@ function(sel_buffer_str,
     fill_mode,
     enable_safety,
     state){
-    sel_buffer = document.querySelector("gradio-app").shadowRoot.querySelector("#input textarea").value;
+    sel_buffer = document.querySelector("gradio-app").querySelector("#input textarea").value;
     return [
         sel_buffer,
         prompt_text,

js/setup.js

@@ -1,11 +1,11 @@
 function(token_val, width, height, size){
-    let app=document.querySelector("gradio-app").shadowRoot;
+    let app=document.querySelector("gradio-app");
     app.querySelector("#sdinfframe").style.height=height+"px";
     let frame=app.querySelector("#sdinfframe").contentWindow.document;
     if(frame.querySelector("#setup").value=="0")
     {
         window.my_setup=setInterval(function(){
-            let frame=document.querySelector("gradio-app").shadowRoot.querySelector("#sdinfframe").contentWindow.document;
+            let frame=document.querySelector("gradio-app").querySelector("#sdinfframe").contentWindow.document;
             console.log("Check PyScript...")
             if(frame.querySelector("#setup").value=="1")
             {

js/upload.js

@@ -4,11 +4,11 @@ function(a,b){
         console.log("setup upload here");
         window.my_observe_upload = new MutationObserver(function (event) {
             console.log(event);
-            var frame=document.querySelector("gradio-app").shadowRoot.querySelector("#sdinfframe").contentWindow;
-            var str=document.querySelector("gradio-app").shadowRoot.querySelector("#upload textarea").value;
+            var frame=document.querySelector("gradio-app").querySelector("#sdinfframe").contentWindow;
+            var str=document.querySelector("gradio-app").querySelector("#upload textarea").value;
             frame.postMessage(["upload", str], "*");
         });
-        window.my_observe_upload_target = document.querySelector("gradio-app").shadowRoot.querySelector("#upload span");
+        window.my_observe_upload_target = document.querySelector("gradio-app").querySelector("#upload span");
         window.my_observe_upload.observe(window.my_observe_upload_target, {
             attributes: false, 
             subtree: true,