diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html index 8da8852bbe..9d7eadbb5f 100644 --- a/src/lib/style-properties.html +++ b/src/lib/style-properties.html @@ -518,17 +518,23 @@ * support element.customStyle / element.updateStyles) */ updateNativeStyleProperties: function(element, properties) { - // remove existing properties - for (var i=0; i < element.style.length; i++) { - element.style.removeProperty(element.style[i]); + var oldPropertyNames = element.__customStyleProperties; + if (oldPropertyNames) { + // remove previous properties + for (var i=0; i < oldPropertyNames.length; i++) { + element.style.removeProperty(oldPropertyNames[i]); + } } + var propertyNames = []; // apply properties for (var p in properties) { // NOTE: for bc with shim, don't apply null values. if (properties[p] !== null) { element.style.setProperty(p, properties[p]); + propertyNames.push(p); } } + element.__customStyleProperties = propertyNames; }, rx: styleUtil.rx, diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html index 70a650313b..15cd763852 100644 --- a/test/unit/styling-cross-scope-var.html +++ b/test/unit/styling-cross-scope-var.html @@ -1163,6 +1163,33 @@ CustomElements.takeRecords(); assertComputed(e, 'rgb(102, 205, 170)', null, 'color'); }); + + test('updateStyles plays nicely with inline styling', function() { + if (!Polymer.Settings.useNativeCSSProperties) { + this.skip(); + } + var e = document.createElement('x-dynamic'); + document.body.appendChild(e); + CustomElements.takeRecords(); + e.style.cssText = 'background-color: rgb(255, 0, 0);'; + e.updateStyles(); + assertComputed(e, 'rgb(255, 0, 0)', null, 'background-color'); + }); + test('updateStyles removes the correct number of style properties', function() { + if (!Polymer.Settings.useNativeCSSProperties) { + this.skip(); + } + var e = document.createElement('x-dynamic'); + document.body.appendChild(e); + CustomElements.takeRecords(); + e.style.cssText = 'background-color: rgb(255, 0, 0);'; + e.updateStyles({'--dynamic': '2px solid black'}); + assertComputed(e, 'rgb(255, 0, 0)', null, 'background-color'); + assertComputed(e, '2px'); + e.updateStyles({'--dynamic': null}); + assertComputed(e, 'rgb(255, 0, 0)', null, 'background-color'); + assertComputed(e, '6px'); + }); });