Skip to content
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

Slot not working on async custom elements #4639

Closed
gnuletik opened this issue Sep 21, 2021 · 0 comments · Fixed by #4657
Closed

Slot not working on async custom elements #4639

gnuletik opened this issue Sep 21, 2021 · 0 comments · Fixed by #4657
Labels
feat: custom elements 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working

Comments

@gnuletik
Copy link

Version

3.2.12

Reproduction link

github.com

Steps to reproduce

Custom elements usage inside index.html

<html>
  <body>
    <my-component>
      <button>Slot content</button>
    </my-component>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

MyComponent.ce.vue

<template>
  <slot><button>Default slot</button></slot>
</template>

main.ts

import { defineCustomElement, defineAsyncComponent } from 'vue'

// Slot fails
customElements.define('my-component', defineCustomElement(
  defineAsyncComponent(() => import('./MyComponent.ce.vue'))
))

// Slot works when using not async component
/*
import MyComponent from './MyComponent.ce.vue'

customElements.define('my-component', defineCustomElement(MyComponent))
*/

What is expected?

The slot content defined when consuming the custom elements should be rendered (a.k.a "Slot Content").

What is actually happening?

The default slot defined in the Vue component is rendered (a.k.a "Default slot").

@gnuletik gnuletik changed the title slot not working on async custom elements Slot not working on async custom elements Sep 21, 2021
@yyx990803 yyx990803 added feat: custom elements 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working labels Sep 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: custom elements 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants