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();