How to use $attrs to inherit events in Web Components built with vue3

[101polarbears]

I was trying to inherit attributes (props and events) passed into web components built with vue3

In the process, I found

• Explicitly emiting the event would work just fine, props cosumption would also work.
• Using $attrs and making the components as root of the entry works for props but NOT for events

I am not sure if I had put stuff incorrectly or the feature is simply not supported
Or any suggested work around?

here's the setup (inside a vite project)

<!-- inner.vue -->
<template>
    <button @click="$emit('test', 1)"> click to emit </button>
<template>

<!-- entry.ce.vue -->
<template>
    <inner v-bind="$attrs"></inner>
</template>

// main.js
import { defineCustomElement } from 'vue;
import Entry from '[somewhere]/entry.ce.vue'
customElements.define('custom-entry', defineCustomElement(Entry));

<!-- using as web component (declare tags startsWith "custom-" as custom elements) -->
<!-- App.vue -->
<template>
    <custom-entry @test="handler"><custom-entry>
</template>

<script setup>
const handler = () => {
    // clicking the button does NOT trigger this handler
    console.log('custom test event captured');
};
</script>

[chenxch]

<template>
    <custom-entry  ref="entryRef"><custom-entry>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const entryRef = ref(null)
const handler = () => {
    // clicking the button does NOT trigger this handler
    console.log('custom test event captured');
};

onMounted(() => {
    entryRef.value?.addEventListener('test', handler)
})
</script>

Webcomponent is an event defined by CustomEvent, so you need to add event listeners to the instance.

[101polarbears]

Sorry, but that did not work as the $attrs would not pass the event listeners down added by addEventListener.
I think vue internally handles the emits as custom events already, so using the v-on binding would already capture the custom events emitted by the children components (web components).

[chenxch]

#7497