Polymer 属性 as css 选择器不工作

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 元素，而不是 ID 为 content 的子元素 div，因为它是高分子元素。

生成的标记将是：

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

如果您想将 CSS 样式应用到带有 id 内容的 div，您将不得不使用您已经完成的选择器 :host[active] > #content。

Answer 2

因为您没有将 active 属性映射到 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 问题，而是影子 dom 规范的一部分。 See this link for more information

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

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

另一个例子，使用 :not():

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

Polymer 属性 as css 选择器不工作

Polymer property as css selector is not working

javascript

css

properties

selector

polymer