Fix interactivity in ShadowDOM (pixijs#8406)

michaeljherrmann · Jun 20, 2022 · 03f8b02 · 03f8b02
1 parent 779cdd9
commit 03f8b02
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/events/src/EventSystem.ts b/packages/events/src/EventSystem.ts
@@ -258,7 +258,15 @@ export class EventSystem
         // if we support touch events, then only use those for touch events, not pointer events
         if (this.supportsTouchEvents && (nativeEvent as PointerEvent).pointerType === 'touch') return;
 
-        const outside = nativeEvent.target !== this.domElement ? 'outside' : '';
+        let target = nativeEvent.target;
+
+        // if in shadow DOM use composedPath to access target
+        if (nativeEvent.composedPath && nativeEvent.composedPath().length > 0)
+        {
+            target = nativeEvent.composedPath()[0];
+        }
+
+        const outside = target !== this.domElement ? 'outside' : '';
         const normalizedEvents = this.normalizeToPointerData(nativeEvent);
 
         for (let i = 0, j = normalizedEvents.length; i < j; i++)

diff --git a/packages/interaction/src/InteractionManager.ts b/packages/interaction/src/InteractionManager.ts
@@ -1224,7 +1224,15 @@ export class InteractionManager extends EventEmitter
 
         // if the event wasn't targeting our canvas, then consider it to be pointerupoutside
         // in all cases (unless it was a pointercancel)
-        const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : '';
+        let target = originalEvent.target;
+
+        // if in shadow DOM use composedPath to access target
+        if (originalEvent.composedPath && originalEvent.composedPath().length > 0)
+        {
+            target = originalEvent.composedPath()[0];
+        }
+
+        const eventAppend = target !== this.interactionDOMElement ? 'outside' : '';
 
         for (let i = 0; i < eventLen; i++)
         {