4 ms·
Really like this as a React dev. Recently there is a trend to use inline CSS to do CSS modularization in React, but I feel it's not really a clean approach. Wit
by octref 11y ago
Really like this as a React dev. Recently there is a trend to use inline CSS to do CSS modularization in React, but I feel it's not really a clean approach. With Shadow DOM you can mount the whole React App onto a Shadow root and have perfect CSS encapsulation. Hopefully we can see Shadow DOM supported by major vendors' stable channel soon.
- jlongster 11y agoShadow DOM is not the solution for CSS isolation for components. You'd have to mount every single component into its own shadow DOM which seems unnecessarily complex (and most likely has significant perf implications). The answer to CSS scoping is much simpler: CSS Modules https://github.com/css-modules/css-modules https://github.com/css-modules/css-modules
- spankalee 11y ago> and most likely has significant perf implications This is true, CSS performance is better in native Shadow DOM.
- octref 11y agoNo I wouldn't mount each component into a Shadow DOM. For example if I have a React App with 2 major parts developed by 2 teams, I would just mount them onto 2 Shadow DOMs so each team don't need to worry about CSS classes collisions or whatever else that's on the webpage.