I am facing some problems when rendering a React component in a shadow DOM of a web component. I wrote a small piece of code to turn a React component into a web component, but I want to display the React component inside the shadow DOM of the web component. But in this case, it seems that React is no longer able to catch user interface events (click, keyPress, etc.).
Take an example, let's say that I have the first <awesome-timer /> web component that displays the React component inside the node web component and another <less-awesome-timer /> web component that displays the React component inside the shadow DOM web component. Both web components use the same React component. However, the one that is displayed inside the DOM DOM does not work, because the click events on the button of the timer component do not start the associated function.
I think React is not intended to handle such a case, but I would like more details on this.
An example code can be found here: https://gist.github.com/mathieuancelin/cca14d31184bf4468bc1
Does anyone have an idea about this?
source share