title: Material Design <style> element placement
body: <p>The placement of the  tag for material design seems to be different than for polymer-components.</p>
  
  <p>Previously I used the following placement:</p>
  
  
  
  <p></p>
  
  <pre class="lang-dart prettyprint-override"><code>&lt;polymer-element name='-form'&gt; 
  
    &lt;style&gt;
  
    &lt;/style&gt;  
  
    &lt;template&gt;
  
  
  
    &lt;/template&gt;
  
    &lt;script type="application/dart"&gt;
  
      import 'package:polymer/polymer.dart';
      import 'dart:html';
  
      import 'package:epimss_polymer/.dart';
  
  
      @CustomTag( '-form' )
      class Form extends PolymerElement
      {
  
        @observable 
  
        Form.created() : super.created();
  
      }
  
    &lt;/script&gt; 
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>I am now investigating Google Material Design and found that the CSS placed within the |style| tags are not rendered.</p>
  
  <p>Yet, if I place the tags within the |template| tags it works.</p>
  
  <p></p>
  
  <pre class="lang-dart prettyprint-override"><code>&lt;polymer-element name='-form'&gt; 
  
    &lt;template&gt;
  
      &lt;style&gt;
  
      &lt;/style&gt;    
  
    &lt;/template&gt;
  
    &lt;script type="application/dart"&gt;
  
      import 'package:polymer/polymer.dart';
      import 'dart:html';
  
      import 'package:epimss_polymer/.dart';
  
  
      @CustomTag( '-form' )
      class Form extends PolymerElement
      {
  
        @observable 
  
        Form.created() : super.created();
  
      }
  
    &lt;/script&gt; 
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>I note that the information at <a href="http://www.polymer-project.org/docs/polymer/styling.html" rel="nofollow">http://www.polymer-project.org/docs/polymer/styling.html</a></p>
  
  <p>DOES use the last option.</p>
  
  <p>What is correct for dart-polymer?</p>