Re:I can only think that modern front end development has fa...
by 1337shadow on Sunday April 04, 2021 @03:10PM
(#26691992)
I don't think it matters so much for React/Angular/Vue to support web components because they will be dropped in favor of vanilla js just like jQuery has, thanks to Custom Element which is recommended for MFE, and ESM which will likely be. Mixing different frameworks is a promise that I don't care about, but you got some pretty interesting feedback about it, seems like it might as well take a few years of effort.
Suppose your base Design System is web components. Most Microfrontend (MFE) teams will still pick up an off-the-shelf React, Vue, Angular, etc.
But VDOM and web components don't always play nicely. If you have Parent-Child web components, specifically 1 parent with N-immediate children, React can't resolve this gracefully. Every render past the first breaks with Stencil. That's a pretty significant issue, because (very) common components like Select dropdowns are modeled as 1 parent with N immediate children.
So you can't any longer stay in React's declarative model. The workaround (last comment in issue) has you writing imperative code to fix the problem.
It has that "using D3 in React" vibe to it. It works, but it's not nearly as elegant as if you had, say, a React-based Design System (but then, of course, all your MFE teams must use React).
https://github.com/ionic-team/stencil/issues/2259
Users have also reported the same analogous issue exists for using Web Components in Vue too, so it's not even a React-specific shortcoming.
https://github.com/ionic-team/stencil/issues/2259#issuecomme...