[w3c/webcomponents] idea: clash-free auto-generated class naming. (#492)

[JSS](https://github.com/jsstyles/jss) solves the problem of scoping certain styles to a component because the class names that it generates never collide. To get a picture of what I mean, check out [JSS used with React](https://github.com/jsstyles/react-jss).

In the example there, the value of `classes.button` is something like `button-jss-0` where the trailing number is always unique. This makes is possible that one component can have `classes.button` and another component can also have `classes.button` and the style won't collide.

Can such a mechanism of avoiding style collision be made native in browsers? @rniwa's current approach is to [use ShadowDOM roots to encapsulate styling for the `:host`](https://github.com/w3c/webcomponents/issues/468#issuecomment-214923010) of a component or custom element. This approach seems hacky to me (besides the performance cost) and is probably the result of the fact that no other approach currently exists (or, maybe I've missed it).

So, I thought I'd show JSS's user-land approach, which works extremely well when JSS is used throughout an entire app (for example, a React app using react-jss, there's also a Babel transform for converting inline [CSS-like syntax to JSS](https://github.com/krasimir/cssx/issues/2#issuecomment-215650576)), in order to possibly generate some thought in the direction of somehow scoping stylesheets.



---
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/492