Shadow DOM retargeting and Radium :hover

Question

I ran into this issue while using React inside a Shadow DOM. I've been using a setup similar to this to handle event retargeting.

https://github.com/LukasBombach/react-shadow-dom-retarget-events/blob/master/index.js

Radium ':hover' doesn't work when wrapping my React Components

Answer 1

The issue is that Radium uses onMouseEnter and onMouseLeave. Because of the way bubbling works with these events we won't see these events firing when interacting with elements inside the Shadow DOM. The solution is to dispatch onMouseEnter events when onMouseOver events are firing with the target element and onMouseLeave events when onMouseOut events are firing.