From 12b5a829d9a8ba43d8c951308a5a867075230020 Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Sat, 9 May 2020 21:57:14 +0200
Subject: [PATCH] Make events work when inside a web component

---
 src/ol/MapBrowserEventHandler.js | 13 +++++++++++++
 src/ol/PluggableMap.js           | 18 ++++++++++++------
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/ol/MapBrowserEventHandler.js b/src/ol/MapBrowserEventHandler.js
index ac4095cb13..29358663bd 100644
--- a/src/ol/MapBrowserEventHandler.js
+++ b/src/ol/MapBrowserEventHandler.js
@@ -272,6 +272,19 @@ class MapBrowserEventHandler extends EventTarget {
           this
         )
       );
+      if (
+        this.element_.getRootNode &&
+        this.element_.getRootNode() !== document
+      ) {
+        this.dragListenerKeys_.push(
+          listen(
+            this.element_.getRootNode(),
+            MapBrowserEventType.POINTERUP,
+            this.handlePointerUp_,
+            this
+          )
+        );
+      }
     }
   }
 
diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js
index 6f9546af23..527a72604a 100644
--- a/src/ol/PluggableMap.js
+++ b/src/ol/PluggableMap.js
@@ -1016,15 +1016,21 @@ class PluggableMap extends BaseObject {
       // coordinates so interactions cannot be used.
       return;
     }
-    const target = /** @type {Node} */ (mapBrowserEvent.originalEvent.target);
     if (!mapBrowserEvent.dragging) {
+      const rootNode = this.viewport_.getRootNode
+        ? this.viewport_.getRootNode()
+        : document;
+      const originalEvent = /** @type {PointerEvent} */ (mapBrowserEvent.originalEvent);
+      const target =
+        rootNode === document
+          ? /** @type {Node} */ (originalEvent.target)
+          : /** @type {ShadowRoot} */ (rootNode).elementFromPoint(
+              originalEvent.clientX,
+              originalEvent.clientY
+            );
       if (
         this.overlayContainerStopEvent_.contains(target) ||
-        !(
-          document.body.contains(target) ||
-          (this.viewport_.getRootNode &&
-            this.viewport_.getRootNode().contains(target))
-        )
+        !(document.body.contains(target) || this.viewport_.contains(target))
       ) {
         // Abort if the event target is a child of the container that doesn't allow
         // event propagation or is no longer in the page. It's possible for the target to no longer