Slot not working on async custom elements

gnuletik

Sep 21st 2021

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").

GitHub Track