Add tests and require module to be on style elements.

src/lib/style-util.html

@@ -105,20 +105,24 @@
         var cssText = '';
         var e$ = Array.prototype.slice.call(
           element.querySelectorAll(this.MODULE_STYLES_SELECTOR));
-        for (var i=0, e; i < e$.length; i++) {
+        for (var i=0, e, addModule; i < e$.length; i++) {
           e = e$[i];
+          addModule = null;
           // look inside templates for elements
           if (e.localName === 'template') {
             cssText += this._cssFromElement(e.content);
           } else {
             // style elements inside dom-modules will apply to the main document
             // we don't want this, so we remove them here.
             if (e.localName === 'style') {
+              addModule = e.getAttribute('module');
               // get style element applied to main doc via HTMLImports polyfill
               e = e.__appliedElement || e;
               e.parentNode.removeChild(e);
             // it's an import, assume this is a text file of css content.
             } else {
+              // TODO(sorvell): plan is to deprecate this way to get styles;
+              // remember to add deprecation warning when this is done.
               e = e.import && e.import.body;
             }
             // adjust paths in css.
@@ -127,14 +131,13 @@
             }
           }
           // now support module refs on 'styling' elements
-          var module = e.getAttribute('module');
-          if (module) {
-            cssText += this.cssFromModules(module);
+          if (addModule) {
+            cssText += this.cssFromModules(addModule);
           }
         }
         return cssText;
       },
-
+      
       resolveCss: Polymer.ResolveUrl.resolveCss,
       parser: Polymer.CssParse,
       ruleTypes: Polymer.CssParse.types

test/unit/custom-style-import.html

@@ -1,12 +1,21 @@
-<style is="custom-style">
-  :root {
+<dom-module id="shared-style">
+  <template>
+    <style>
+      :root {
+        --import-var: 3px solid orange;
+      }
+    </style>
+  </template>
+</dom-module>
 
-    --import-var: 3px solid orange;
+<style is="custom-style" module="shared-style">
+  :root {
 
     --import-mixin: {
       border: 4px solid blue;
     };
 
     padding: 10px;
   }
-</style>
+</style>
+

test/unit/styling-remote-elements.html

@@ -87,6 +87,8 @@
 
   </style>
   <template>
+    <!-- style in template using module! -->
+    <style module="remote-styles"></style>
     <content select=".blank"></content>
     <div id="simple">simple</div>
     <div id="complex1" class="scoped">complex1</div>
@@ -111,7 +113,6 @@
 <script>
   Polymer({
     is: 'x-styled',
-    styleModules: ['remote-styles'],
 
     computeClass: function(className) {
       return className;

test/unit/styling-remote-module-sheet.html

@@ -1,4 +1,5 @@
 <dom-module id="remote-styles">
+<template>
   <style>
     #simple {
       border: 3px solid orange;
@@ -8,4 +9,5 @@
       border: 4px solid pink;
     }
   </style>
+</template>
 </dom-module>

test/unit/styling-scoped-elements.html

@@ -1,10 +1,11 @@
 <dom-module id="x-gchild">
-  <style>
-    :host-context(.wide) #target {
-      border: 10px solid orange;
-    }
-  </style>
   <template>
+    <!-- styles can be in templates -->
+    <style>
+      :host-context(.wide) #target {
+        border: 10px solid orange;
+      }
+    </style>
     <div id="target">x-gchild</div>
   </template>
 </dom-module>