在Polymer中重新设计核心纸张元素的正确方法

Question

简单的答案是，只包含

paper-button{
 background: black;
}

，但如果该元素包含在另一个元素中，则不会重新定义该元素的样式。原来的解是

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

仍然可以正常工作，但是已经从Shadow DOM规范中弃用了。那么什么是正确的解决方案呢?

---

p。纯粹是为了完整，以防它在某种程度上很重要:我真正想要正确复制的是

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

Answer 1

您可以使用CSS自定义属性来全局更改paper-button样式。

由于paper-button暴露了--paper-button mixin，您可以在文档中尝试以下操作-

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

看看这个活塞