Events not registered inside shadow dom
LukasBombach opened this issue · comments
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
When you render a react component inside a shadow DOM, events will not be dispatched in react. I.e. you do something like this:
<div onClick={() => alert('I have been clicked')}>foo bar</div>but nothing happens. Someone investigated this already, got to the bottom of it and wrote a work around: https://stackoverflow.com/questions/37866237/click-event-not-firing-when-react-component-in-a-shadow-dom
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
Following the official docs (https://facebook.github.io/react/docs/web-components.html ):
https://jsfiddle.net/84v837e9/187/
What is the expected behavior?
Events should be dispatched even when the react app is rendered in a shadow dom
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
All browsers, tested with react 15.
I published a workaround as an npm package:
https://www.npmjs.com/package/react-shadow-dom-retarget-events
The workaround does not properly work with onChange. When writing
<input onChange={this.handleChange} />onChange will only be triggered on blur, which makes sense, since this is the normal behavior. Can anyone point me to how React does this so I can implement it in my workaround?
Hey there, thanks for the Issue. My first inclination is to say that this is probably the intended behavior. Event bubbling has always been sort of an iffy encapsulation prospect, and I think the goal of the shadow-dom is to allow strict encapsulation of events. My feeling is that this falls under the same sort of category as interop with say jQueries event system (which react can't do), but I wonder what others think. @aweary @nhunzaker
In terms of how React's onChange is implemented its very integrated into react's event system in the ChangeEventPlugin
Yeah, integrating with Shadow DOM events is a hard problem. The event system registers listeners at the top-level, relying on bubbling to know when to handle an event. Since the Shadow DOM events don't bubble to the top-level, we can't see them.
Assuming you want to render an isolated React application inside the Shadow DOM, we might be able to add a check detecting whether an element is in a Shadow DOM or not. Then we could register the top-level listeners on the shadow root instead, but I suspect its easier said than done.
It would be great if we could add support for this. I'm trying to combine Web Components with React and Styled Components to create some UI elements that work standalone or in a larger React application.
This should be fixed in React 17 RC, at least for the general case.
If something doesn't work, file a new issue.
Hehe, so React 17 really does something! 😉
PS: Thanks ✌️