custom-elements-everywhere | Custom Element + Framework Interoperability Tests | Functional Testing library

I read "Events emitted by a Web Component may not properly propagate through a React render tree" from https://reactjs.org/docs/web-components.html and I am wondering what this warnning can really mean in practical terms.

I have worked for while with Polymer 1 and 2 and now I am interested to start use React and take maybe advantage of other libraries well known to work smothly with React (eg. React Saga and Redux). Since I am convinced of advantages to work with WebComponents, I am trying to code a very simple webcomponents to be imported in a React project.

Googling how use my own Webcomponent in a React project I found https://reactjs.org/docs/web-components.html guiding me ("... Using Web Components in React ...") but reading feew lines bellow I read the phrase pasted in my question topic. To make even more serious this warnning I read "... Most people who use React don’t use Web Components...".

So my straight question is: isn't possible to use my own Webcomponets in ReactJs without major concerns? Is this warnning meanning I should expect some serious problems if I develop several WebComponents and try to import and reuse them in a ReactJs project?

Obviously, a simple and isolated project may not worry much since we can test on demand but the main goal is develop a corporative components library based on Webcomponents (not Polymer, just Webcomponents) and allow developers to reuse them in several projects with ReactJs.

*** edited From https://custom-elements-everywhere.com/ I read another warnning similar to above:

"Handling data React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.

Handling events Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome".

I am not interested to compare frameworks. I am purelly interested to be aware of well-know pitfulls I may follow down if I drive the company to develop a corporative library of webcomponets (future readers may find worth read about https://medium.muz.li/what-is-a-design-system-1e43d19e7696) and assume that we can stacks based on ReactJs.