title: Trouble styling polymer element
body: <p>I'm having trouble styling a polymer paper button element. In the following example, I'm not sure why my styles for <code>#rate</code> are not being applied to the paper button.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://www.polymer-project.org/platform.js"&gt;&lt;/script&gt;
  &lt;link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"&gt;
  &lt;link href="http://www.polymer-project.org/components/paper-button/paper-button.html" rel="import"&gt;
  
  &lt;polymer-element name="my-element" noscript&gt;
    &lt;template&gt;
      &lt;style&gt;
             :host #rate {
               background: yellow;
               color: green;
               height: 25px;
               line-height: 8px;
               margin: 0;
               text-transform: none;
        }
      &lt;/style&gt;
      &lt;paper-button id="rate"&gt;rate/reply&lt;/paper-button&gt;
    &lt;/template&gt;
  &lt;/polymer-element&gt;
  &lt;my-element&gt;&lt;/my-element&gt;</code></pre>
  </div>
  </div>
  </p>