From 5dcf45c6f6d1802f842f559380f51168fd0d9dba Mon Sep 17 00:00:00 2001
From: shadowings-zy <shadowingszy@outlook.com>
Date: Fri, 18 Dec 2020 20:49:34 +0800
Subject: [PATCH] fix: fix the bug: kebab-case events are attached as lower
 case on web components, see #2841

---
 .../runtime-dom/__tests__/patchEvents.spec.ts | 26 +++++++++++++++++++
 packages/runtime-dom/src/modules/events.ts    |  4 +--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-dom/__tests__/patchEvents.spec.ts b/packages/runtime-dom/__tests__/patchEvents.spec.ts
index a9145f40d9a..9c30616a24a 100644
--- a/packages/runtime-dom/__tests__/patchEvents.spec.ts
+++ b/packages/runtime-dom/__tests__/patchEvents.spec.ts
@@ -153,4 +153,30 @@ describe(`runtime-dom: events patching`, () => {
     expect(prevFn).toHaveBeenCalledTimes(2)
     expect(nextFn).toHaveBeenCalledTimes(4)
   })
+
+  // #2841
+  test('should patch event correctly in web-components', async () => {
+    class TestElement extends HTMLElement {
+      constructor() {
+        super()
+      }
+    }
+    window.customElements.define('test-element', TestElement)
+    const testElement = document.createElement('test-element', {
+      is: 'test-element'
+    })
+    const fn1 = jest.fn()
+    const fn2 = jest.fn()
+
+    // in webComponents, @foo-bar will patch prop 'onFooBar'
+    // and @foobar will patch prop 'onFoobar'
+
+    patchProp(testElement, 'onFooBar', null, fn1)
+    testElement.dispatchEvent(new CustomEvent('foo-bar'))
+    expect(fn1).toHaveBeenCalledTimes(1)
+
+    patchProp(testElement, 'onFoobar', null, fn2)
+    testElement.dispatchEvent(new CustomEvent('foobar'))
+    expect(fn2).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/packages/runtime-dom/src/modules/events.ts b/packages/runtime-dom/src/modules/events.ts
index 3c3335a5363..a81b6fdf3f0 100644
--- a/packages/runtime-dom/src/modules/events.ts
+++ b/packages/runtime-dom/src/modules/events.ts
@@ -1,4 +1,4 @@
-import { isArray } from '@vue/shared'
+import { hyphenate, isArray } from '@vue/shared'
 import {
   ComponentInternalInstance,
   callWithAsyncErrorHandling
@@ -96,7 +96,7 @@ function parseName(name: string): [string, EventListenerOptions | undefined] {
       options
     }
   }
-  return [name.slice(2).toLowerCase(), options]
+  return [hyphenate(name.slice(2)), options]
 }
 
 function createInvoker(