I’ve only been using React for a few weeks but the comparisons on that page to React are FUD and the incompatibility with web components is just plain wrong and mixing them is covered here https://reactjs.org/docs/web-components.html
From the page you linked: "Events emitted by a Web Component may not properly propagate through a React render tree."
React components are brittle, that's not FUD. For example, CSS classes used by React components can clash with other React components, or with the page that includes them. What's FUD about that?
That's misunderstandong of the technology. React has nothing to do with styles, it manipulates DOM. Handling styles is up to you, and it's extremely easy to use CSS modules.
React is a component technology and doesn't solve the problem of clashing styles, element ids and so on. Web components is a component technology that does.
No, it's not a limitation, it's called separation of concerns, I don't want my component framework interfering with the job of Webpack or application runtime. I want to use my preferred (also easy, standard, ...) solution.
> clashing IDs
React solves that one, not through namespacing though. You never need to use IDs with React.
> clashing styles
React gives you power to solve this one by your preferred solution. You can use expressions in your JSX, and thus it's very easy to do one of the following:
- Import your CSS file as a module using Webpack - classnames are guaranteed to be unique; additionally, similar approach as TypeStyle (global optimal stylesheet) can be set up
- Use just "inline" styles (preferably not really inlined in your JSX) since React will keep it updated for you as well
Not doing anything about CSS isn't separation of concerns, it's just a leaky abstraction. Separation of concerns implies some work was done to achieve some level of decoupling that would otherwise be tighter.
In fact, the criticism that react components can have style clashes is precisely one of not having enough separation of concerns. The fact that there are numerous libraries to address that deficiency further indicates that react as a platform is severely affected by the underlying level of abstraction when it comes to styling.
It's fine to defend a technology you like but calling a weakness a strength does nobody any favors.
Styled-Components gives you efficiently “inlined” styles (creates unique CSS class used only by instances of your component) and doesn’t affect global CSS. It’s up to the developer to avoid polluting with global CSS and that’s honestly not very difficult.
If you don't care about accessibility then yes.l, but try using properly annotated aria attributes without appropriately scoped ids(which you can do in react, but it's not free).
