diff --git a/src/lib/style-util.html b/src/lib/style-util.html
index 1fd3845f42..82c6eeec41 100644
--- a/src/lib/style-util.html
+++ b/src/lib/style-util.html
@@ -17,6 +17,8 @@
     var settings = Polymer.Settings;
 
     return {
+      unscopedStyleImports: new WeakMap(),
+      SHADY_UNSCOPED_ATTR: 'shady-unscoped',
       // chrome 49 has semi-working css vars, check if box-shadow works
       // safari 9.1 has a recalc bug: https://bugs.webkit.org/show_bug.cgi?id=155782
       NATIVE_VARIABLES: Polymer.Settings.useNativeCSSProperties,
@@ -211,12 +213,34 @@
               // get style element applied to main doc via HTMLImports polyfill
               e = e.__appliedElement || e;
               e.parentNode.removeChild(e);
-              cssText += this.resolveCss(e.textContent, element.ownerDocument);
+              var css = this.resolveCss(e.textContent, element.ownerDocument);
+              // support: unscoped styles
+              if (!settings.useNativeShadow &&
+                e.hasAttribute(this.SHADY_UNSCOPED_ATTR)) {
+                e.textContent = css;
+                document.head.insertBefore(e, document.head.firstChild);
+              } else {
+                cssText += css;
+              }
             // it's an import, assume this is a text file of css content.
             // TODO(sorvell): plan is to deprecate this way to get styles;
             // remember to add deprecation warning when this is done.
             } else if (e.import && e.import.body) {
-              cssText += this.resolveCss(e.import.body.textContent, e.import);
+              var importCss = this.resolveCss(e.import.body.textContent, e.import);
+              // support: unscoped styles
+              // record imports in a WeakMap so they are de-duped if unscoped > 1x.
+              if (!settings.useNativeShadow &&
+                e.hasAttribute(this.SHADY_UNSCOPED_ATTR)) {
+                if (!this.unscopedStyleImports.has(e.import)) {
+                  this.unscopedStyleImports.set(e.import, true);
+                  var importStyle = document.createElement('style');
+                  importStyle.setAttribute(this.SHADY_UNSCOPED_ATTR, '');
+                  importStyle.textContent = importCss;
+                  document.head.insertBefore(importStyle, document.head.firstChild);
+                }
+              } else {
+                cssText += importCss;
+              }
             }
           }
         }
diff --git a/test/runner.html b/test/runner.html
index d18d6ba6ca..d72fbfcfc7 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -102,7 +102,11 @@
       'unit/custom-style-transformed.html',
       'unit/custom-style-transformed.html?dom=shadow',
       'unit/custom-style-transformed.html?lazyRegister=true&useNativeCSSProperties=true',
-      'unit/custom-style-transformed.html?lazyRegister=true&useNativeCSSProperties=true&dom=shadow'
+      'unit/custom-style-transformed.html?lazyRegister=true&useNativeCSSProperties=true&dom=shadow',
+      'unit/shady-unscoped-style.html',
+      'unit/shady-unscoped-style.html?dom=shadow',
+      'unit/shady-unscoped-style.html?lazyRegister=true&useNativeCSSProperties=true',
+      'unit/shady-unscoped-style.html?lazyRegister=true&useNativeCSSProperties=true&dom=shadow'
     ];
 
     if ('import' in document.createElement('link') && (window.customElements || document.registerElement)) {
diff --git a/test/unit/shady-unscoped-style-import-css.html b/test/unit/shady-unscoped-style-import-css.html
new file mode 100644
index 0000000000..3e99a3189c
--- /dev/null
+++ b/test/unit/shady-unscoped-style-import-css.html
@@ -0,0 +1,3 @@
+.import {
+  border: 2px solid yellow;
+}
\ No newline at end of file
diff --git a/test/unit/shady-unscoped-style-import.html b/test/unit/shady-unscoped-style-import.html
new file mode 100644
index 0000000000..5fe5c6ae4f
--- /dev/null
+++ b/test/unit/shady-unscoped-style-import.html
@@ -0,0 +1,26 @@
+<dom-module id="global-shared1">
+  <link rel="import" type="css" shady-unscoped href="shady-unscoped-style-import-css.html">
+  <template>
+    <style shady-unscoped>
+      :root {
+        --zug: margin: 10px;
+      }
+
+      .happy {
+        @apply --zug;
+        border: 1px solid green;
+      }
+    </style>
+
+    <style>
+      .normal {
+        border: 3px solid orange;
+      }
+    </style>
+  </template>
+</dom-module>
+
+<dom-module id="global-shared2">
+  <link rel="import" type="css" shady-unscoped href="shady-unscoped-style-import-css.html">
+</dom-module>
+
diff --git a/test/unit/shady-unscoped-style.html b/test/unit/shady-unscoped-style.html
new file mode 100644
index 0000000000..24305987e6
--- /dev/null
+++ b/test/unit/shady-unscoped-style.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<html>
+<head>
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../polymer.html">
+  <link rel="import" href="shady-unscoped-style-import.html">
+</head>
+<body>
+
+<custom-style>
+  <style is="custom-style">
+    html {
+      --foo: {
+        padding: 10px;
+      }
+    }
+  </style>
+</custom-style>
+
+ <dom-module id="my-element">
+
+    <template>
+      <style include="global-shared1 global-shared2">
+        :host {
+          display: block;
+        }
+
+        .happy {
+          @apply --foo;
+        }
+      </style>
+      <div id="fromStyle" class="happy">Happy: green</div>
+      <div id="fromImport" class="import">Happy: yellow</div>
+      <div id="normal" class="normal">Happy: orange</div>
+    </template>
+
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'my-element'
+      });
+    });
+    </script>
+
+  </dom-module>
+
+  <dom-module id="my-element2">
+
+    <template>
+      <style include="global-shared1">
+        :host {
+          display: block;
+        }
+
+      </style>
+      <div id="fromStyle" class="happy">Happy: green</div>
+      <div id="fromImport" class="import">Happy: yellow</div>
+      <div id="normal" class="normal">Happy: orange</div>
+    </template>
+
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({ is: 'my-element2'});
+    });
+    </script>
+
+  </dom-module>
+
+  <my-element></my-element>
+  <my-element2></my-element2>
+
+<script>
+  suite('shady-unscoped styles', function() {
+
+    function assertComputed(element, value, property, pseudo) {
+      var computed = getComputedStyle(element, pseudo);
+      property = property || 'border-top-width';
+      if (Array.isArray(value)) {
+        assert.oneOf(computed[property], value, 'computed style incorrect for ' + property);
+      } else {
+        assert.equal(computed[property], value, 'computed style incorrect for ' + property);
+      }
+    }
+
+    var el1 = document.querySelector('my-element');
+    var el2 = document.querySelector('my-element2');
+
+    test('unscoped styles apply', function() {
+      assertComputed(el1.$.fromStyle, '1px');
+      assertComputed(el1.$.fromImport, '2px');
+      assertComputed(el2.$.fromStyle, '1px');
+      assertComputed(el2.$.fromImport, '2px');
+    });
+
+    test('shared and @apply apply when used with unscoped styles', function() {
+      assertComputed(el1.$.fromStyle, '10px', 'padding');
+      assertComputed(el1.$.normal, '3px');
+      assertComputed(el2.$.normal, '3px');
+    })
+
+    test('unscoped styling de-duped in ShadyDOM', function() {
+      if (Polymer.Settings.useNativeShadow) {
+        this.skip();
+      }
+      assert.equal(document.head.querySelectorAll('style[shady-unscoped]').length, 2);
+    });
+
+    test('@apply does not apply under ShadyDOM for shady-unscoped styles', function() {
+      if (Polymer.Settings.useNativeShadow) {
+        this.skip();
+      }
+      assertComputed(el1.$.fromStyle, '0px', 'margin');
+      assertComputed(el2.$.fromStyle, '0px', 'margin');
+    })
+
+
+  });
+</script>
+</body>
+</html>
\ No newline at end of file