Testing stye in extended polymer elements

How can I get styling to override the parent element?

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<polymer-element name="polymer-cool">
  <template>
    <style>
        #p {
            color: red;
        }    
    </style>
      You are <span id='p'>{{praise}}</span> <content></content>!
  </template>
  <script>
    Polymer('polymer-cool', {
      praise: 'cool'
    });
  </script>
</polymer-element>

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

<polymer-cooler>Matt</polymer-cooler>

CSS

polymer-cooler {
  background: red;
}