Question

我有一个扩展另一个元素的元素，我在使用文档中的the example覆盖父级时遇到了问题。例如，假设我想在父元素中设置赞美的样式：

<polymer-element name="polymer-cool">
  <template>
    <style>
        :host #p {
            color: red;
        }    
    </style>
    You are <span id='p'>{{praise}}</span> <content></content>!
  </template>
  ...
</polymer-element>

但在该元素的扩展名中更改：

<polymer-element name="polymer-cooler" extends="polymer-cool">
  <template>
    <!-- A shadow element render's the extended
         element's shadow dom here. -->
    <style>
        #p {
            color: blue;
        }
    </style>
    <shadow></shadow> <!-- "You are cool Matt" -->
  </template>
  ...
</polymer-element>

你可以在下面的JSfiddle中看到，我无法改变span #p的颜色。我尝试过其他一些事情，比如

polymer-cooler #p {
    color: blue;
}

尝试将样式放在标签内，但没有运气。希望它是可能的，我只是遗漏了一些东西。

http://jsfiddle.net/jamstooks/tpyL9/

Answer 1

嗯，这看起来很有效。我很想从某人那里得到一些澄清，说明这是否是最好的方法：

<polymer-element name="polymer-cooler" extends="polymer-cool">
  <template>
    <style>
         {
            :host::shadow #p
            color: blue;
        }
    </style>  
    <shadow></shadow>
  </template>
  ...
</polymer-element>

http://jsfiddle.net/jamstooks/tpyL9/4/

编辑：2014年7月22日

根据以下Scott的评论，我已将上述代码从:host /deep/ #p更新为:host::shadow #p

如何在扩展聚合物元素时覆盖父样式

1 个答案: