title: Why aren't my styles in my Polymer custom element being recognized?
body: <p>For some reason the internal (:host) styles for the Polymer custom element aren't loading. I'm using the actual fancy_button component from pub (<a href="https://pub.dartlang.org/packages/fancy_button" rel="nofollow">https://pub.dartlang.org/packages/fancy_button</a>).</p>
  
  <p>hello_world.html</p>
  
  
  
  <pre class="lang-dart prettyprint-override"><code>&lt;head&gt;
    &lt;link rel="import" href="packages/polymer/polymer.html"&gt;
    &lt;link rel="import" href="packages/fancy_button/fancy_button.html"&gt;
    &lt;link rel="import" href="../lib/components/first-component/first-component.html"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;button is="fancy-button"&gt;Wooot!&lt;/button&gt;
  &lt;script type="application/dart"&gt;export 'package:polymer/init.dart';&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>fancy_button.html:</p>
  
  <pre class="lang-dart prettyprint-override"><code>&lt;link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'&gt;
  
  &lt;polymer-element name="fancy-button" extends="button"&gt;
    &lt;template&gt;
      &lt;style&gt;
        :host {
          background: linear-gradient(to bottom, #ff5db1 0%,#ef017c 100%);
          box-shadow: 10px 10px 5px #888888;
          border-radius: 5px;
          font-size: 2em;
          border: 0;
          font-family: 'Tangerine', cursive;
          padding: 30px;
        }
  
        :host(:hover) {
          cursor: pointer;
        }
  
        :host(:active) {
          font-size: 3em;
        }
      &lt;/style&gt;
      &lt;content&gt;&lt;/content&gt;
    &lt;/template&gt;
    &lt;script type="application/dart" src="fancy_button.dart"&gt;&lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>