Repository navigation
Vue 3 does not handle events with specific names (capture, once, passive) from custom element #8334
Description
Vue version
3
Link to minimal reproduction
https://codesandbox.io/p/sandbox/autumn-dust-4f3rb4
Steps to reproduce
- Create a SFC component
- Define in that component event with name "capture"
- Define custom element in window
- Use this custom element in Vue 3 App
- Subscribe to event and trigger some method on it
What is expected?
Method is triggered on event "capture" from custom element
What is actually happening?
Method is NOT triggered
System Info
No response
Any additional comments?
That custom element works fine with Vue 2
Activity
sqal commentedon May 16, 2023
It seems to be an issue with binding @once event. Your reproduction doesn't show any errors, If you look at SFC Playground there's an error thrown by vue:
Cannot read properties of undefined (reading 'toLowerCase')and it happens because
@onceevent. Others work properly.kirillshatalkin commentedon May 16, 2023
@sqal to reproduce you need to define component as Custom Element:
Comp.vuetoComp.ce.vueimport { defineCustomElement } from "vue"; import Comp from './Comp.ce.vue'; window.customElements.define("my-comp", defineCustomElement(Comp));App.vuelike custom element<my-comp @capture="capture"></my-comp>Vue SFC Playground
sqal commentedon May 16, 2023
I am sorry, I didn't notice at first that you were using web component., In that case, events such as capture, once, passive indeed don't work with custom elements
edison1105 commentedon May 16, 2023
There's a problem here. PR welcome.
core/packages/runtime-dom/src/modules/events.ts
Line 60 in d40d4a3
edison1105 commentedon May 17, 2023
@yyx990803 normal component also has the same issues.
baiwusanyu-c commentedon May 23, 2023
I find
onceproblematic in regular components, are there other use cases? I created a new issue（#8341） and submitted a PR（#8342）,the test example in this issue（#8334 ） works fine in the PRchore(deps): update vue monorepo to v3.5.39 (#180)