Fixes #1277

src/lib/style-util.html

@@ -51,8 +51,10 @@
       style.textContent = cssText;
       target = target || document.head;
       if (lowPriority) {
-        target.insertBefore(style, target.firstChild);
-      } else {
+        var n$ = target.querySelectorAll('style[scope]');
+        var ref = n$.length ? n$[n$.length-1].nextSibling : target.firstChild;
+        target.insertBefore(style, ref);
+     } else {
         target.appendChild(style);
       }
       return style;

test/unit/scoped-styling-elements.html

@@ -14,6 +14,22 @@
   });
 </script>
 
+<dom-module id="x-child2">
+  <style>
+    :host(.wide) #target{
+      border: none;
+    }
+  </style>
+  <template>
+    <div id="target">x-child2</div>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'x-child2'
+  });
+</script>
+
 <dom-module id="x-styled">
   <style>
     :host {
@@ -54,6 +70,10 @@
     #priority {
       border: 9px solid orange;
     }
+
+    x-child2.wide::shadow #target {
+      border: 12px solid brown;
+    }
   </style>
   <template>
     <div id="simple">simple</div>
@@ -65,6 +85,7 @@
     </div>
     <x-child id="child"></x-child>
     <div id="priority">priority</div>
+    <x-child2 class="wide" id="child2"></x-child2>
   </template>
 </dom-module>
 <script>

test/unit/scoped-styling.html

@@ -109,6 +109,16 @@
       assertComputed(button, '10px');
       assertComputed(specialButton, '11px');
     });
+
+    test('styles shimmed in registration order', function() {
+      var s$ = document.head.querySelectorAll('style[scope]');
+      var expected = ['x-child2', 'x-styled', 'x-button'];
+      var actual = [];
+      for (var i=0; i<s$.length; i++) {
+        actual.push(s$[i].getAttribute('scope'));
+      }
+      assert.deepEqual(actual, expected);
+    });
 
   });