CODEWITHSUNDEEP
csspolymerweb-component
Dene B
Dene B

Reputation: 496

Polymer, style disabled web-component

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.

Upvotes: 0

Views: 2944

Answers (2)

Peter Burns
Peter Burns

Reputation: 45331

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

Upvotes: 7

Winchestro
Winchestro

Reputation: 2188

I think you misunderstood the :host selector. It selects the element itself, not the content in the shadow root. In order to overwrite it all you have to do is to...just style the button exactly like you'd do it with a regular HTMLElement :)

<style>
    paper-button {

    }
    paper-button[disabled]{
        ..overwrite styling here...
    }
<style>

Upvotes: 2

Related Questions