Fix for #1582

Author: Steven Orvell

src/mini/ready.html

@@ -135,10 +135,12 @@
     // for system overriding
     _beforeClientsReady: function() {},
     _afterClientsReady: function() {},
+    _beforeAttached: function() {},
 
     // normalize lifecycle: ensure attached occurs only after ready.
     attachedCallback: function() {
       if (this._readied) {
+        this._beforeAttached();
         baseAttachedCallback.call(this);
       } else {
         this._attachedPending = true;

src/standard/x-styling.html

@@ -14,7 +14,6 @@
 <script>
   (function() {
 
-    var attachedCallback = Polymer.Base.attachedCallback;
     var serializeValueToAttribute = Polymer.Base.serializeValueToAttribute;
 
     var propertyUtils = Polymer.StyleProperties;
@@ -44,13 +43,12 @@
           this._ownStylePropertyNames.length);
       },
 
-      attachedCallback: function() {
+      _beforeAttached: function() {
         // note: do this once automatically,
         // then requires calling `updateStyles`
         if (!this._scopeSelector && this._needsStyleProperties()) {
           this._updateStyleProperties();
         }
-        attachedCallback.call(this);
       },
 
       _updateStyleProperties: function() {

test/unit/styling-cross-scope-var.html

@@ -123,6 +123,30 @@
     </script>
   </dom-module>
 
+  <dom-module id="x-has-if">
+    <style>
+      .iffy {
+        border: var(--scope-var);
+      }
+    </style>
+
+    <template>
+      <template is="dom-if" if="{{gogo}}">
+        <div class="iffy">iffy</div>
+      </template>
+    </template>
+    <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'x-has-if',
+        properties: {
+          gogo: {value: true}
+        }
+      });
+    });
+    </script>
+  </dom-module>
+ 
   <dom-module id="x-scope">
     <style>
       :host {
@@ -197,10 +221,13 @@
       <div id="calc">Calc</div>
       <div id="shadow">Shadow</div>
       <x-host-property id="hostProp"></x-host-property>
+      <x-has-if id="iffy"></x-has-if>
     </template>
     <script>
     HTMLImports.whenReady(function() {
-      Polymer({is: 'x-scope'});
+      Polymer({
+        is: 'x-scope'
+      });
     });
     </script>
   </dom-module>
@@ -299,6 +326,13 @@
     }
     assertComputed(styled.$.child.$.me, '2px');
   });
+
+  test('style properties with dom-if', function() {
+    var e = styled.$.iffy;
+    var c = Polymer.dom(e.root).querySelector('.iffy');
+    assert.ok(c, 'dom-if did not stamp');
+    assertComputed(c, '1px');
+  });
 
 });