diff --git a/src/lib/custom-style.html b/src/lib/custom-style.html index 18e0685478..1dfc788606 100644 --- a/src/lib/custom-style.html +++ b/src/lib/custom-style.html @@ -146,9 +146,6 @@ if (!settings.useNativeCSSProperties) { styleDefaults.addStyle(e); } - if (Polymer.RenderStatus.hasRendered()) { - updateDebouncer = debounce(updateDebouncer, this._updateStyles); - } // we may not have any textContent yet due to parser yielding // if so, wait until we do... if (e.textContent || this.include) { @@ -232,21 +229,38 @@ // `_apply` after B. // This case should only occur with native webcomponents. var self = this; + // if Polymer is ready when this element tries to apply styling then, + // it has been loaded async and needs to trigger a full updateStyles + // to guarantee properies update correctly. + this.__needsUpdateStyles = Polymer.RenderStatus.hasRendered() && + (this.__needsUpdateStyles !== false); var fn = function fn() { - self._applyCustomProperties(); - } - if (this._pendingApplyProperties) { - cancelAnimationFrame(this._pendingApplyProperties); - this._pendingApplyProperties = null; + self._flushCustomProperties(); } if (deferProperties) { - this._pendingApplyProperties = requestAnimationFrame(fn); + if (!this.__scheduledPropertiesFlush) { + this.__scheduledPropertiesFlush = true; + Polymer.RenderStatus.whenReady(fn); + } } else { fn(); } } }, + _flushCustomProperties: function() { + this.__scheduledPropertiesFlush = false; + // if this style has not yet applied at all and it was loaded asynchronously + // (detected by Polymer being ready when this element tried to apply), then + // do a full updateStyles to ensure that + if (this.__needsUpdateStyles) { + this.__needsUpdateStyles = false; + updateDebouncer = debounce(updateDebouncer, this._updateStyles); + } else { + this._applyCustomProperties(); + } + }, + _applyCustomProperties: function() { var element = this.__appliedElement; this._computeStyleProperties();