diff --git a/src/standard/x-styling.html b/src/standard/x-styling.html
index 2aaf734d41..7707d73c27 100644
--- a/src/standard/x-styling.html
+++ b/src/standard/x-styling.html
@@ -52,6 +52,10 @@
      * @return {String} the computed value
      */
       getComputedStyleValue: function(property) {
+        // refresh the style properties for this node
+        if (!nativeVariables && !this._styleProperties) {
+          this._computeStyleProperties();
+        }
         return !nativeVariables && this._styleProperties &&
           this._styleProperties[property] ||
           getComputedStyle(this).getPropertyValue(property);
diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
index b37482cede..324ab3530a 100644
--- a/test/unit/styling-cross-scope-var.html
+++ b/test/unit/styling-cross-scope-var.html
@@ -857,6 +857,30 @@
   </script>
 </dom-module>
 
+<dom-module id="prop-inner">
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({is: 'prop-inner'});
+  });
+  </script>
+</dom-module>
+
+<dom-module id="prop-outer">
+  <template>
+    <style>
+    :host {
+      --foo: orange;
+    }
+    </style>
+    <prop-inner id="inner"></prop-inner>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({is: 'prop-outer'});
+  });
+  </script>
+</dom-module>
+
 <script>
   suite('scoped-styling-var', function() {
 
@@ -1307,6 +1331,14 @@
     assertComputed(e.$.root, '2px');
     assertComputed(e.$.host, '10px');
   });
+
+  test('elements in the dom should be able to query for inherited variables', function() {
+    var e = document.createElement('prop-outer');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    assert.equal(e.getComputedStyleValue('--foo').trim(), 'orange');
+    assert.equal(e.$.inner.getComputedStyleValue('--foo').trim(), 'orange');
+  })
 });
 
 </script>