聚合物,样式禁用的Web组件

Question

我最近一直在关注Polymer,但是当我想在常规样式表中重新disabled设置<paper-button>元素的状态时,我遇到了问题.

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

有人可以帮忙吗？我尝试了各种各样的::阴影,但我只是碰到了一堵砖墙:>

谢谢.

Answer 1

在元素定义之外,您不使用:host引用该元素,而是通过其标记名称引用它.

<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>