How to style a Polymer element from the main stylesheet?

Question

I'm using <paper-progress-button> in a project, and I want to style it from my main stylesheet but can't get it to work.

The styling code for <paper-progress-button> looks like this:

<dom-module id="paper-progress-button">

    <template>
        <style>
            :host {
                display: inline-block;
            }

            .button {
                @apply --paper-progress-button-button;
            }

            .button:not([disabled]) {
                @apply --paper-progress-button-button-active;
            }

            .spinner {
                margin-left: 10px;
                @apply --paper-progress-button-spinner;
            }

            [hidden] {
                display: none;
            }
        </style>

        ...

I've tried all sorts of ways to get my styles from a main site-level stylesheet to affect the button, but none seem to work:

main.css

--paper-progress-button-button {
    background-color: red;
}

main.css

* {
    --paper-progress-button-button {
        background-color: red;
    };
}

custom_style.html

<custom-style>
    <style is="custom-style">
        --paper-progress-button-button {
            background-color: red;
        }
    </style>
</custom-style>

custom_style.html

<custom-style>
    <style is="custom-style">
        :root {
            --paper-progress-button-button {
                background-color: red;
            };
        }
    </style>
</custom-style>

The documentation for styling Polymer 2 is huge, but doesn't even mention @apply once! So how do I really style that button from my site-level stylesheet?

Answer 1

Polymer currently only shims CSS properties within a custom-style or a Polymer element's style; and not from an external stylesheet.

Also note the style usage is incorrect, as the CSS property name must be followed by a colon:

.my-div {
  --paper-progress-button-button: {
    background-color: red;
  };
}

demo