Interactions fail in shadow DOM of web component

Expected Behavior

I’d love to use PIXI.js in context of a web component (made with stenciljs) for rendering an interactive map combining PIXI and leaflet. Markers should be clickable and draggable, thus need to have all interaction events working properly. For ease of implementation there should be a sole covering handler per event on stage or some other container for capturing and handling clicks etc.

Current Behavior

1. Clicks on interactive display objects don’t work.
2. Clicking an interactive stage doesn’t even trigger pointerdown events.

Possible Solution

1. Click on display object: following some investigating I conclude that this is due to *up-event’s target referring to the wrapping component (host element) rather than PIXI’s canvas (a.k.a. interactionDOMElement) … thus it assumes *up event having occurred outside of its view and thus doesn’t click, but considers interaction sort of cancelled.
2. Click on stage isn’t recognized at all: haven’t investigated this one, but I assume this is kind of intentional, though stage is a PIXI.Container which is a display object as well. (isn’t it?)

Steps to Reproduce

1. Open fiddle at https://jsfiddle.net/soletan/r9kLstd8/40/
2. Click on red box and observe event handlers logging in on-screen console (or failing to do so).
3. Click on black stage and observe console logging again (though there is no logging).

Environment

• pixi.js version: 6.0.0-rc.2
• Browser & Version: Firefox 84
• OS & Version: Windows 10
• Running Example: https://jsfiddle.net/soletan/r9kLstd8/40/

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[soletan]

Regarding the hitarea: I see.

Regarding component support: using web components is very handy nowadays. In the existing project I had to switch that component to use a fallback method instead of native shadow DOM. As far as I can tell it’s having remarkable negative impact on its rendering performance. When using the component events are basically getting through and I assume all it takes is a different information to be evaluated to discover whether pointer has actually left the listening part of PIXI’s tree.