Defer property application only when a custom-style is first created.

Author: Steven Orvell

src/lib/custom-style.html

@@ -116,12 +116,12 @@
           // we may not have any textContent yet due to parser yielding
           // if so, wait until we do...
           if (e.textContent || this.include) {
-            this._apply();
+            this._apply(true);
           } else {
             var self = this;
             var observer = new MutationObserver(function() {
               observer.disconnect();
-              self._apply();
+              self._apply(true);
             });
             observer.observe(e, {childList: true});
           }
@@ -131,7 +131,7 @@
 
     // polyfill this style with root scoping and 
     // apply custom properties!
-    _apply: function() {
+    _apply: function(deferProperties) {
       // used applied element from HTMLImports polyfill or this
       var e = this.__appliedElement || this;
       if (this.include) {
@@ -157,9 +157,18 @@
         // `_apply` after B. 
         // This case should only occur with native webcomponents.
         var self = this;
-        requestAnimationFrame(function() {
+        function fn() {
           self._applyCustomProperties(e);
-        });
+        }
+        if (this._pendingApplyProperties) {
+          cancelAnimationFrame(this._pendingApplyProperties);
+          this._pendingApplyProperties = null;
+        }
+        if (deferProperties) {
+          this._pendingApplyProperties = requestAnimationFrame(fn);
+        } else {
+          fn();
+        }
       }
     },
 

test/unit/custom-style.html

@@ -359,17 +359,15 @@
         assertComputed(m, '4px');
       });
 
-      test('dynamic custom-styles apply', function(done) {
+      test('dynamic custom-styles apply', function() {
         var dynamic = document.querySelector('.dynamic');
         assertComputed(dynamic, '0px');
         var ds = document.createElement('style', 'custom-style');
         ds.textContent = ':root { --dynamic: 11px solid orange; }';
         document.head.appendChild(ds);
+        CustomElements.takeRecords();
         Polymer.updateStyles();
-        Polymer.RenderStatus.afterNextRender(null, function() {
-          assertComputed(dynamic, '11px');
-          done();
-        });
+        assertComputed(dynamic, '11px');
       });
 
       test('custom-styles apply normal and property values to elements and cannot be late bound via inheritance', function() {
@@ -409,20 +407,18 @@
         document.body.removeChild(style);
       });
 
-      test('imperative custom style with include', function(done) {
+      test('imperative custom style with include', function() {
         var style = document.createElement('style', 'custom-style');
         style.include = 'shared-style2';
         var d = document.createElement('div');
         d.classList.add('zazz');
         document.body.appendChild(d);
         document.body.appendChild(style);
         CustomElements.takeRecords();
-        Polymer.RenderStatus.afterNextRender(null, function() {
-          assertComputed(d, '16px');
-          document.body.removeChild(d);
-          document.body.removeChild(style);
-          done();
-        });
+        Polymer.updateStyles();
+        assertComputed(d, '16px');
+        document.body.removeChild(d);
+        document.body.removeChild(style);
       });
 
       test('imperative custom style with non-existent include', function() {