Handle out of shadow dom dragging and explain logic better

src/ol/PluggableMap.js

@@ -1030,14 +1030,17 @@ class PluggableMap extends BaseObject {
               originalEvent.clientY
             );
       if (
-        this.overlayContainerStopEvent_.contains(target) ||
-        !(document.body.contains(target) || rootNode.contains(target))
+        // Do not abort when the pointer is outside the shadow root
+        originalEvent.target !== document.documentElement &&
+        // Abort when target is on overlayContainerStopEvent
+        (this.overlayContainerStopEvent_.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
+          // be in the page if it has been removed in an event listener, this might happen in a Control
+          // that recreates it's content based on user interaction either manually or via a render
+          // in something like https://reactjs.org/
+          !(document.body.contains(target) || rootNode.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
-        // be in the page if it has been removed in an event listener, this might happen in a Control
-        // that recreates it's content based on user interaction either manually or via a render
-        // in something like https://reactjs.org/
         return;
       }
     }