css - 扩展 polymer 元素时如何覆盖父样式

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