We have a design system with components written in React. I was thinking of rendering those with preact compat and then wrapping those in preact-custom-element to be able to use the components in a Vue/Angular or vanilla js app. I get a few issues tho.

1. Children of the custom element in html is not replaced when the Preact component mounts. I tried the "solution" to this by @donpark in this issue thread but I can't just switch out {children} for <slot /> if I want to keep compatibility with React and also it didn't work when I tried it.
   Using a shadow DOM here, passing shadow: true to the register function of preact-custom-element works but since I'm using Emotion as a CSS-in-JS I need the global styling support. There are ways of controlling where Emotion inserts styles and use shadow DOM here but that would probably mess with other teams implementation as of now. I would like it to be able to use this lib without enabling shadow DOM.

2. I can't get property bindings to work at all as demonstrated in this PR. Attributes work fine, but properties doesn't end up as props on the Preact component (whether shadow DOM is used or not).

All the issues is demonstrated in this sandbox.