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');
+ });
});