Polymer, style disabled web-component

Asked By: Anonymous

I have been looking at Polymer lately, however I have come up against problems when wanting to re-style the disabled state of the <paper-button> element from within a regular stylesheet.

<paper-button disabled="disabled" ...>
    #shadow-root
        <script>
            :host {...}
            :host([disabled]) {
                ...I want to be able to overwrite styling here...
            }

Can anyone help please? I have tried various incantations of ::shadow but I am just hitting my head against a brick wall :>

Thanks.

Solution

Answered By: Anonymous

Outside of the definition of an element you don’t refer to that element with :host, instead refer to it by its tag name.

<script src='//www.polymer-project.org/components/platform/platform.js'></script>_x000D_
<link rel='import' href='//www.polymer-project.org/components/paper-button/paper-button.html'>_x000D_
<style>_x000D_
  paper-button[disabled] {_x000D_
    border: 5px dotted rgba(100, 100, 100, 0.2);_x000D_
  }_x000D_
</style>_x000D_
<paper-button disabled>Can't click me!</paper-button>

x000D