diff --git a/render/render.js b/render/render.js index d59f816f5..d9442e137 100644 --- a/render/render.js +++ b/render/render.js @@ -746,11 +746,8 @@ module.exports = function() { if (old && old === attrs) { console.warn("Don't reuse attrs object, use new object for every redraw, this will throw in next major") } - if (attrs != null) { - for (var key in attrs) { - setAttr(vnode, key, old && old[key], attrs[key], ns) - } - } + // Some attributes may NOT be case-sensitive (e.g. data-***), + // so removal should be done first to prevent accidental removal for newly setting values. var val if (old != null) { for (var key in old) { @@ -759,6 +756,11 @@ module.exports = function() { } } } + if (attrs != null) { + for (var key in attrs) { + setAttr(vnode, key, old && old[key], attrs[key], ns) + } + } } function isFormAttribute(vnode, attr) { return attr === "value" || attr === "checked" || attr === "selectedIndex" || attr === "selected" && vnode.dom === activeElement(vnode.dom) || vnode.tag === "option" && vnode.dom.parentNode === activeElement(vnode.dom) @@ -799,6 +801,15 @@ module.exports = function() { } } } else { + // Remove style properties that no longer exist. + // Style properties may have two cases(dash-case and camelCase), + // so removal should be done first to prevent accidental removal for newly setting values. + for (var key in old) { + if (old[key] != null && style[key] == null) { + if (key[0] === "-" && key[1] === "-") element.style.removeProperty(key) + else element.style[key] = "" + } + } // Both old & new are (different) objects. // Update style properties that have changed for (var key in style) { @@ -808,13 +819,6 @@ module.exports = function() { else element.style[key] = value } } - // Remove style properties that no longer exist - for (var key in old) { - if (old[key] != null && style[key] == null) { - if (key[0] === "-" && key[1] === "-") element.style.removeProperty(key) - else element.style[key] = "" - } - } } }