Question

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

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

有人可以帮忙吗？我尝试过各种各样的::阴影，但我只是碰到了一堵砖墙：＆gt;

感谢。

Answer 1

除了元素的定义之外，你不能用：host引用该元素，而是用它的标记名称来引用它。

＆＃13;

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

＆＃13;

Answer 2

我认为你误解了：主机选择器。它选择元素本身，而不是阴影根中的内容。为了覆盖它，你所要做的就是......只需按照你的方式设置样式，并使用常规的HTMLElement：）

<style>
    paper-button {

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

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

2 个答案: