@apply bunch of styles for various elements

[nazar-pc]

I'd like to use normalize.css, while avoiding to patch it with html /deep/ whatever.
Perfect solution would be to create WebComponent and then use it inside other elements with:

@apply(--normalize-css);

I mean right in CSS root, not in some specific selector.
In such way I can apply it only to elements I need, not literally everywhere.
It doesn't seem to be possible at the moment, but are there any plans for this?

[nazar-pc]

How to use it: for instance, I've imported component called x-button.
This nice button comes in red color.
I want to add to it's styles:

:host([green]) {
    background: green;
}

So that it would be possible to use the same button as:

<x-button green></x-button>

Currently there is no possibility to reuse it in such way other than:

html /deep/ x-button[green] {
    background: green;
}

[dfreedm]

It sounds like what you want is style modules: https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modules

[nazar-pc]

Unfortunately not, it will not work for x-button[green] within Shadow DOM (native).