Material Design <style> element placement

Question

The placement of the tag for material design seems to be different than for polymer-components.

Previously I used the following placement:

<polymer-element name='-form'> 

  <style>

  </style>  

  <template>



  </template>

  <script type="application/dart">

    import 'package:polymer/polymer.dart';
    import 'dart:html';

    import 'package:epimss_polymer/.dart';


    @CustomTag( '-form' )
    class Form extends PolymerElement
    {

      @observable 

      Form.created() : super.created();

    }

  </script> 
</polymer-element>

I am now investigating Google Material Design and found that the CSS placed within the |style| tags are not rendered.

Yet, if I place the tags within the |template| tags it works.

<polymer-element name='-form'> 

  <template>

    <style>

    </style>    

  </template>

  <script type="application/dart">

    import 'package:polymer/polymer.dart';
    import 'dart:html';

    import 'package:epimss_polymer/.dart';


    @CustomTag( '-form' )
    class Form extends PolymerElement
    {

      @observable 

      Form.created() : super.created();

    }

  </script> 
</polymer-element>

I note that the information at http://www.polymer-project.org/docs/polymer/styling.html

DOES use the last option.

What is correct for dart-polymer?

Answer 1

The style tag for a Polymer element is always inside <template> tag. There must be something else that causes this behavior.

Have you tried to place the - dash in the middle of the name instead of the front?
Even when this might be valid, could be that nobody tried this before and doesn't work as expected.