Skip to content

Event not emitting in Web Component Slot #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kat3su opened this issue Feb 21, 2021 · 4 comments
Open

Event not emitting in Web Component Slot #98

kat3su opened this issue Feb 21, 2021 · 4 comments

Comments

@kat3su
Copy link

kat3su commented Feb 21, 2021

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>
@zengguirong
Copy link

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.

@Hobart2967
Copy link

Also, property updates do not seem to work then

@kalun1988
Copy link

Same problem faced. Any workaround solution?

@JamesSky
Copy link

So hard

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants