Subscribe on changes!

Conditional rendering of slots when using Vue for Web Components

avatar
Jun 23rd 2023

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ejghdu

Steps to reproduce

  1. Click the Toggle Slot Button

What is expected?

The slot content should be shown after clicking the button. And should be hidden again after another click.

What is actually happening?

The property changes on the custom element, but the slot content is not dynamically rendered. When clicking the toggle button twice, a js error is raised. See screenshot: Bildschirmfoto 2023-06-23 um 16 25 56

System Info

No response

Any additional comments?

We are building a web component library with Vue and noticed this issue. Although we are uncertain about whether this is intended to work, the fact that the extensive Vue documentation on web components and slots does not mention this limitation leads us to assume that it should function as expected.