diff --git a/lib/mixins/element-mixin.html b/lib/mixins/element-mixin.html
index 7f26212c3e..419209b624 100644
--- a/lib/mixins/element-mixin.html
+++ b/lib/mixins/element-mixin.html
@@ -417,16 +417,20 @@
     function processElementStyles(klass, template, is, baseURI) {
       const styles = Polymer.StyleGather.stylesFromModuleImports(is).concat(
         Polymer.StyleGather.stylesFromTemplate(template));
-      let templateStyles = template.content.querySelectorAll('style');
-      let lastStyle = templateStyles[templateStyles.length-1];
+      const templateStyles = Array.from(template.content.querySelectorAll('style'));
+      // keep track of the last "concrete" style in the template we have encountered
+      let templateStyleIndex = 0;
       // ensure all gathered styles are actually in this template.
       for (let i=0; i < styles.length; i++) {
         let s = styles[i];
         // if the style is not in this template, it's been "included" and
-        // we put a clone of it in the template.
-        if (s.getRootNode() != template.content) {
+        // we put a clone of it in the template before the style that included it
+        if (templateStyles.indexOf(s) === -1) {
           s = s.cloneNode(true);
-          template.content.insertBefore(s, lastStyle);
+          let importingTemplateStyle = templateStyles[templateStyleIndex];
+          importingTemplateStyle.parentNode.insertBefore(s, importingTemplateStyle);
+        } else {
+          templateStyleIndex++;
         }
         s.textContent = klass._processStyleText(s.textContent, baseURI);
       }
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
index 0330b19ea5..7859aa5444 100644
--- a/test/unit/styling-scoped.html
+++ b/test/unit/styling-scoped.html
@@ -660,6 +660,31 @@
   </x-specificity-parent>
   <x-overriding></x-overriding>
 
+  <dom-module id="x-nested-style">
+    <template>
+      <div id="container">
+        <style include="shared-style">
+          :host {
+            display: block;
+            border: 10px solid black;
+          }
+        </style>
+      </div>
+    </template>
+    <script>
+      addEventListener('WebComponentsReady', () => {
+        class XNestedStyle extends Polymer.Element {
+          static get is() {return 'x-nested-style';}
+          ready() {
+            super.ready();
+            this.classList.add('x-shared1');
+          }
+        }
+        customElements.define(XNestedStyle.is, XNestedStyle);
+      });
+    </script>
+  </dom-module>
+
 <script>
 (function() {
   function assertComputed(element, value, property, pseudo) {
@@ -917,6 +942,13 @@
       assertComputed(e, '1px');
     });
 
+    test('styles work correctly when not direct children of the template', function() {
+      var e = document.createElement('x-nested-style');
+      document.body.appendChild(e);
+      assertComputed(e, '10px');
+      assertComputed(e, '10px', 'top');
+    });
+
   });
 
   if (window.ShadyDOM) {