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

Jump to bottom

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
🔨 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 scope: custom elements

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 scope: 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
@edison1105 edison1105 mentioned this issue Sep 23, 2021
Merged
@gnuletik gnuletik mentioned this issue Sep 23, 2021
Closed
yyx990803 pushed a commit that referenced this issue Apr 13, 2022
@edison1105
fix(custom-elements): work with async component + slots (#4657)
f4d2c9f 
close #4639
@github-actions github-actions bot locked and limited conversation to collaborators Sep 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
🔨 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 scope: custom elements
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(custom-elements): work with async component + slots edison1105/vuejs-core
2 participants
@yyx990803 @gnuletik