fix(runtime-dom): style update error when component use shorthand properties (#7425)

* fix(runtime-dom): style update error when component use shorthand properties

* test(runtime-dom): style update with shorthand properties

packages/runtime-dom/__tests__/patchStyle.spec.ts

@@ -106,6 +106,18 @@ describe(`runtime-dom: style patching`, () => {
     expect(el.style.getPropertyValue('--custom')).toBe('100\\;')
   })
 
+  it('shorthand properties', () => {
+    const el = document.createElement('div')
+    patchProp(
+      el as any,
+      'style',
+      { borderBottom: '1px solid red' },
+      { border: '1px solid green' }
+    )
+    expect(el.style.border).toBe('1px solid green')
+    expect(el.style.borderBottom).toBe('1px solid green')
+  })
+
   // JSDOM doesn't support custom properties on style object so we have to
   // mock it here.
   function mockElementWithStyle() {

packages/runtime-dom/src/modules/style.ts

@@ -7,9 +7,6 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
   const style = (el as HTMLElement).style
   const isCssString = isString(next)
   if (next && !isCssString) {
-    for (const key in next) {
-      setStyle(style, key, next[key])
-    }
     if (prev && !isString(prev)) {
       for (const key in prev) {
         if (next[key] == null) {
@@ -17,6 +14,9 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
         }
       }
     }
+    for (const key in next) {
+      setStyle(style, key, next[key])
+    }
   } else {
     const currentDisplay = style.display
     if (isCssString) {