CODEWITHSUNDEEP
htmlcsspolymerpolymer-1.0shadow-dom
David Mulder
David Mulder

Reputation: 26985

The proper way to restyle a core paper element globally in Polymer

The easy answer is, just include

paper-button{
 background: black;
}

, but that wouldn't restyle the element if it is contained in another element. The solution used to be

html /deep/ paper-button{
 background: black;
}

which still works fine, but is deprecated from the Shadow DOM spec. So what is the proper solution?

PS. Purely to be complete in case it somehow matters: What I actually want to reproduce properly is 

html /deep/ paper-button.main{
 [...]
}

Upvotes: 0

Views: 113

Answers (1)

Justin XL
Justin XL

Reputation: 39006

You can use CSS custom properties to change the paper-button style globally.

Since paper-button exposes the --paper-button mixin, you can try the following inside your document -

<style is="custom-style">
  simple-dialog, paper-button {
    --paper-button: {
      background-color: black; 
      color: white;
    };
  }
</style>

Have a look at this plunker.

Upvotes: 2

Related Questions