Vue 3 does not handle events with specific names (capture, once, passive) from custom element

[kirillshatalkin]

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

[sqal]

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 @once event. Others work properly.

[kirillshatalkin]

@sqal to reproduce you need to define component as Custom Element:

1. Rename Comp.vue to Comp.ce.vue
2. Define it as custom element import { defineCustomElement } from "vue"; import Comp from './Comp.ce.vue'; window.customElements.define("my-comp", defineCustomElement(Comp));
3. Use it in App.vue like custom element <my-comp @capture="capture"></my-comp>

Vue SFC Playground

[sqal]

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]

There's a problem here. PR welcome.

core/packages/runtime-dom/src/modules/events.ts

Line 60 in d40d4a3

const optionsModifierRE = /(?:Once|Passive|Capture)$/

[edison1105]

@yyx990803 normal component also has the same issues.

[baiwusanyu-c]

@yyx990803 normal component also has the same issues.

I find once problematic 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 PR