Question

我正在尝试使用聚合物属性active作为css选择器。这适用于:host[active]，例如我的代码:host[active] > #content中的3。

但是我不明白为什么例1 #content[active]？

是不可能的

这是我的测试代码：

感谢您的回答。

<dom-module id="polymer-component"> 
  <template>
    <div id="content">test</div>
  </template>

  <style>
    :host {
      width: 50px;
      height: 50px;
      color: blue;
    }

:host[active]{
  color: yellow;
}

#content{
  width: 50px;
  height: 50px;
}
/*Example 1*/
#content[active]{
  color: red;
}
/*Example 2*/
:host #content[active]{
  color: red;
}
/*Example 3*/
:host[active] > #content{
  color: red;
}
/*Example 4*/
:host (#content[active]){
  color: red;
}
  </style>
</dom-module>

<script>
Polymer({
    is: "polymer-component",
    properties: {
      active: {
        type: Boolean,
        reflectToAttribute: true
      }
    }
  });
</script>

Answer 1

这是因为active属性将应用于polymer-component元素，而不是div的子content，因为它是聚合物元素的属性。

结果标记为：

<polymer-content active>
  <div id="content"></div>
</polymer-content>

如果要将CSS样式应用于包含id内容的div，则必须使用已经完成的选择器:host[active] > #content。

Answer 2

由于您没有将活动属性映射到div，因此它将无法工作。

以下是如何使#content[active]工作

的示例

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<dom-module id="polymer-component">
  <template>
    <div id="content" active$={{active}}>test</div>
  </template>

  <style>
    :host {
      width: 50px;
      height: 50px;
      color: blue;
    }
    :host[active] {
      color: yellow;
    }
    #content {
      width: 50px;
      height: 50px;
    }
    /*Example 1*/
    #content[active] {
      color: red;
    }
    /*Example 2*/
    :host #content[active] {
      color: green;
    }
    /*Example 3*/
    :host[active] > #content {
      color: black;
    }
    /*Example 4*/
    :host (#content[active]) {
      color: palegoldenrod;
    }
  </style>
</dom-module>

<script>
  Polymer({
    is: "polymer-component",
    properties: {
      active: {
        type: Boolean,
        value: false,
      }
    }
  });
</script>


<polymer-component active></polymer-component>

如果您检查该示例，您会看到#content[active]已应用但被第三个示例覆盖，即host[active] > #content

Answer 3

这本身不是Polymer问题，而是Shadow dom规范的一部分。 See this link for more information

简而言之，您需要将选择器括在括号中

:host([active]) {
  color: red;
}

另一个示例，使用：not（）：

:host( :not([active]) ) {
  color: blue;
}

作为css选择器的Polymer属性不起作用

3 个答案: