Are there any drawbacks when rendering a React component inside an svg foreignObject?

I am using jointJS as a diagramming library. It creates nodes on a graph using svg elements.

I want to use react to render the content of those nodes, and since jointJS lets me configure what svg element i want it to use, all I have to do is

• Configure jointJS so it knowns a node is a <foreignObject>
• Retrieve that foreign object, and mount a react component inside of it using createPortal
• Dynamically size the foreign object so it fits the react component.

It works fine, but I don't have enough experience with foreignObject to know if any caveats are to be expected.

Can anyone provide some feedback about their experience with such practices ?

Answering my own (old) question feels a bit like:

If you're reading this because you're faced with a similar issue, my advice is to avoid being in this situation in the first place.

Some standard CSS features will behave inconsistently, won't work at all, or will have very different outputs depending on the browser you're using. If I remember correctly, transform and opacity are the two main problematic properties. Also, animating those properties will rarely work at first try.

Perhaps this is such an edge case that browser bugs are not often found and reported. (and probably not prioritised).

We ended up developing a flowchart library that natively uses react to display nodes.

Cheers!!