Pass shadowRoot ot WebDragAndDropManager and use it for creating uncorrupted ghostImage (#2520)

The goals of this PR are:
* introduce important minimal styling for shadowRoot that improved UX
for mobile Safari
 * Fix the rendering of ghostImage in Drag-and-Drop scenarios

## Testing
`gradlew testWeb` and manually checking drag and drop

## Release Notes
N/A

Author: Schahen

compose/mpp/demo/src/webMain/kotlin/androidx/compose/mpp/demo/Utils.kt

@@ -30,10 +30,6 @@ internal fun setupBackingTextAreaDebugHints() {
     shadowRootStyle.textContent = """
         :host {
             --input-mode-indicator: transparent;
-                
-            -webkit-touch-callout: none; 
-            -webkit-user-select: none; 
-            user-select: none;
         }
         
         :host:has(input, textarea) {

compose/ui/ui/src/webCommonW3C/kotlin/androidx/compose/ui/draganddrop/WebDragAndDropManager.kt

@@ -21,8 +21,9 @@ import org.w3c.dom.DragEvent
 import org.w3c.dom.HTMLCanvasElement
 import org.w3c.dom.ImageData
 import org.w3c.dom.HTMLElement
+import org.w3c.dom.Node
 
-internal abstract class WebDragAndDropManager(eventListener: EventTargetListener, globalEventsListener: EventTargetListener, private val density: Density) :
+internal abstract class WebDragAndDropManager(private val rootNode: Node, eventListener: EventTargetListener, globalEventsListener: EventTargetListener, private val density: Density) :
     PlatformDragAndDropManager {
     override val isRequestDragAndDropTransferRequired: Boolean
         get() = false
@@ -42,12 +43,14 @@ internal abstract class WebDragAndDropManager(eventListener: EventTargetListener
             top = "0"
             left = "0"
 
+
             setProperty("pointer-events", "none")
+            setProperty("z-index", "-1")
         }
 
-        // non-image elements passed to setDragImage should be present on document
+        // non-image elements passed to setDragImage should be present in the document
         // the only browser the only browser not burdened with this limitation is Firefox
-        document.body?.appendChild(ghostImage)
+        rootNode.appendChild(ghostImage)
 
         dataTransfer?.setDragImage(ghostImage, 0, 0)
 
@@ -218,7 +221,7 @@ private class InternalStartTransferScope(
         return ImageData(uint8ClampedArray, imageBitmap.width, imageBitmap.height)
     }
 
-    fun ImageData.asHtmlCanvas(): HTMLCanvasElement {
+    private fun ImageData.asHtmlCanvas(): HTMLCanvasElement {
         val canvasConverter = document.createElement("canvas") as HTMLCanvasElement
 
         canvasConverter.width = width

compose/ui/ui/src/webCommonW3C/kotlin/androidx/compose/ui/window/ComposeWindow.w3c.kt

@@ -97,6 +97,7 @@ import org.w3c.dom.HTMLElement
 import org.w3c.dom.HTMLStyleElement
 import org.w3c.dom.HTMLTitleElement
 import org.w3c.dom.MediaQueryListEvent
+import org.w3c.dom.Node
 import org.w3c.dom.OPEN
 import org.w3c.dom.ShadowRootInit
 import org.w3c.dom.ShadowRootMode
@@ -184,6 +185,7 @@ internal class DefaultWindowState(private val viewportContainer: Element) : Comp
 @OptIn(InternalComposeApi::class)
 internal class ComposeWindow(
     private val canvas: HTMLCanvasElement,
+    private val rootNode: Node,
     private val interopContainerElement: HTMLDivElement,
     private val a11yContainerElement: HTMLDivElement?,
     private val configuration: ComposeViewportConfiguration,
@@ -217,7 +219,7 @@ internal class ComposeWindow(
         override val architectureComponentsOwner get() = archComponentsOwner
         override val inputModeManager: InputModeManager = DefaultInputModeManager()
 
-        override val dragAndDropManager: PlatformDragAndDropManager = object : WebDragAndDropManager(canvasEvents, state.globalEvents, density) {
+        override val dragAndDropManager: PlatformDragAndDropManager = object : WebDragAndDropManager(rootNode, canvasEvents, state.globalEvents, density) {
             override val rootDragAndDropNode: ComposeSceneDragAndDropNode
                 get() = scene.rootDragAndDropNode
         }
@@ -676,6 +678,7 @@ fun CanvasBasedWindow(
 
     ComposeWindow(
         canvas = canvas,
+        rootNode = canvas.getRootNode(),
         // a detached container
         interopContainerElement = document.createElement("div") as HTMLDivElement,
         a11yContainerElement = document.createElement("div") as HTMLDivElement,
@@ -736,7 +739,18 @@ fun ComposeViewport(
     }
 
     val shadowRoot = viewportContainer.attachShadow(ShadowRootInit(ShadowRootMode.OPEN))
-    shadowRoot.appendChild(layerRoot)
+    val shadowRootStyle = document.createElement("style")
+    shadowRootStyle.textContent = """
+        :host {
+            -webkit-touch-callout: none; 
+            -webkit-user-select: none; 
+            user-select: none;
+            
+            position: relative;
+        }
+    """.trimIndent()
+
+    shadowRoot.append(shadowRootStyle, layerRoot)
     layerRoot.appendChild(canvas)
 
     val interopContainerElement = document.createElement("div") as HTMLDivElement
@@ -765,6 +779,7 @@ fun ComposeViewport(
 
     ComposeWindow(
         canvas = canvas,
+        rootNode = shadowRoot,
         interopContainerElement = interopContainerElement,
         a11yContainerElement = a11yContainerElement,
         content = content,

compose/ui/ui/src/webTest/kotlin/androidx/compose/ui/OnCanvasTests.kt

@@ -76,7 +76,7 @@ internal interface OnCanvasTests {
 
     private fun getContainer() = document.getElementById(containerId) ?: error("failed to get canvas with id ${containerId}")
 
-    private fun getAppRoot() = getShadowRoot().children[0] as HTMLElement
+    private fun getAppRoot() = getShadowRoot().children[1] as HTMLElement
 
     fun getA11YContainer(): HTMLElement? {
         return if (getAppRoot().children.length < 3) {

compose/ui/ui/src/webTest/kotlin/androidx/compose/ui/window/ComposeWindowLifecycleTest.kt

@@ -40,6 +40,7 @@ class ComposeWindowLifecycleTest : OnCanvasTests {
 
         val composeWindow = ComposeWindow(
             canvas = canvas,
+            rootNode = getShadowRoot(),
             interopContainerElement = document.createElement("div") as HTMLDivElement,
             a11yContainerElement = null,
             content = {},