vuejs/vue-web-component-wrapper

Event not emitting in Web Component Slot

kat3su opened this issue · 4 comments

Simple example as below. When trying to catch an event in web component slot, it's not working. Using browser onClick works fine.

web-container.vue - web component

<template> 
  <div class="wrapper">
    <slot></slot>
  </div>
</template>

app.vue - vue application

<template>
  <div>
    <web-container>
      <button @click="doSomething">Hello</button>
    </web-container>
  </div>
</template>
<script>
export default {
  methods: {
    doSomething() {
      console.log("This is not working"); // Not being console.log
    }
  }
}
</script>

The wrapper change the real dom to VNodes(toVNodes method) in connectedCallback.
But there is no way to get the event listeners on a html element using javascript.
So the wrapper lose all event listeners after the conversion.
It's a serious problem.

Also, property updates do not seem to work then

Same problem faced. Any workaround solution?

So hard