Using slot content with v-if and same DOM elements lead to patching error #9308
Description
Vue version
3.3.4
Link to minimal reproduction
https://stackblitz.com/edit/vue-mbuqlf?file=src%2FApp.vue
Steps to reproduce
- Create a child element with the following template:
<template>
<div class="hello">
<slot name="example">
<h2 v-if="true">Before</h2>
</slot>
</div>
</template>- Create a parent component with the following code:
<template>
<div id="app">
<HelloWorld>
<template #example>
<h2 v-if="loaded">
<!-- content needs to access a variable -->
<span>After {{ foobar }}</span>
</h2>
</template>
</HelloWorld>
{{ loaded }}
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld,
},
data() {
return {
loaded: false,
foobar: 123,
};
},
mounted() {
window.setTimeout(() => {
console.log('LOADED CHANGED');
this.loaded = true;
}, 3000);
},
};
</script>What is expected?
After 3 seconds the slot content gets replaced with After 123.
What is actually happening?
A error gets thrown and the default slot content gets rendered:
System Info
No response
Any additional comments?
No response