Event listeners sometimes not invoked for native web components
ekashida opened this issue · comments
Description
Event listeners inside native web components are sometimes not being invoked when they should be. This is specifically an issue for relatively uncommon closed shadow roots; however, the issue is magnified in an LWS context where an element's shadowRoot property evaluates to null regardless of whether it is open or closed.
The root cause is due to the caching we have in place for composed path computation, when evaluating whether a listener should be invoked for a particular component. While we do handle the case for native shadow roots, it's an incomplete solution because it relies on external access to the shadow root. The composed path changes based on context, so relying on a composed path from a different context can result in an incorrect outcome when deciding whether an event listener should be invoked.
Steps to Reproduce
Test that demonstrates the issue can be found in the following branch:
https://github.com/salesforce/lwc/tree/composed-path-shadow-polyfill
Browsers Affected
This is a bug with the framework so all browsers are affected.
Possible Solution
Disabling the caching for computed composed paths is one potential solution, but performance may be an issue since we do the computation for every potential event listener invocation. We don't actually need to do this for native shadow roots because it's handled by the browser--the component would never see the event if it didn't have access to it. Therefore, the easiest solution would be to completely bypass our addEventListener() patch.
**Additional context
If we correctly handle the native shadow root case, then we can keep the caching in place because that will only apply for light DOM and synthetic shadow roots for which the composed path is non-contextual.
This issue has been linked to a new work item: W-15126117
Fixed by #4012