Feature request: CSS Element selectors local scope (encapsulation)

[nabilnaffar]

Feature request: Support CSS elements selectors local scope

We're developing components library and we're looking for a way to locally scope CSS element selectors styles.
for example:

:local(button){
   color: tomato;
} 

I want this style to affect only 1 component and not the whole buttons on the page of whoever uses it.

(the :local selector doesn't affect the button style encapsulation. )

Is there already a library/plugin that does that?

If not - a possible solution would be to add hashed custom attribute as Angular does:
https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html - ViewEncapsulation.Emulated

TL;TR:

<button custom-generated-attribute >Press here</button>

button [custom-generated-attribute]{
   color: tomato;
}

[TrySound]

And how do you consider apply these styles to your component? Like this?

const template = `
  <button ${styles.button}>Press here</button>
`;

[nabilnaffar]

No need to specifically apply the style (as with classes) since it's element selector.
Problem with those kind of styles is that they are global and I'm looking for a way to encapsulate them.
Shadow Dom has this feature but it's not supported yet in all browsers.
Second thing I found is the way Angular does that as I specified.