[spankalee]

Shadow DOM completely solves this problem in a better way by scoping styles to a shadow root. The scoping allows the browser to be smarter about style recalc as well.

I do really like the idea of importing CSS into JS as a module to access the classnames and IDs though. I would like to do a similar thing with HTML imports as modules: import references to elements based on id.

[TeeWEE]

Indeed, i just posted the some comment, but you where first.

The shadow dom solves the css modularity problem. And also comes with better "componetization of the web". React is imho not the end solution, and the virtual-dom and the diffing of nodes should actually be built into browsers, and not into a javascript framework...

[ivanca]

Unfortunately Shadow DOM inherits CSS properties such as color;font-family.

[spankalee]

Yes, certain properties cascade through the shadow boundary. That's completely intended, and easy to work around by using a shadow-scoped reset if you need to, but otherwise it's useful to be able to set the font or color for an entire tree-scope at once.

[TeeWEE]

Where do you read that? I just checked the spec and coundt find this exception to the rule.

[ivanca]

I didn't, it is how it works in latest Chrome.

In all fairness, that's how a blank browser works by default (e.g. Times News Roman is the inherited font-family if you don't specify one) so is very likely the intended behavior.