<template>
  <h1>App.vue</h1>
  <p>The component has two slots, but the 'topSlot' is not used by the parent.</p>
  <slot-comp>
    <!-- <template v-slot:topSlot>Content for 'bottomSlot'</template> -->
    <template v-slot:bottomSlot>Content for 'bottomSlot'</template>
  </slot-comp>
</template>

<script></script>

<style>
  #app {
    width: 300px;
  }
</style>                  

<template>
  <hr>
  <h3>Component</h3>
  <div>
    <slot name="topSlot">Fallback content for 'topSlot'</slot>
  </div>
  <div>
    <slot name="bottomSlot">Fallback content for 'bottomSlot'</slot>
  </div>
  <div id="resultDiv">
    <p><em>{{ slotsText }}</em></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slotsText: null
    }
  },
  mounted(){
    if(this.$slots.topSlot){
      this.slotsText = "Content for the 'topSlot' slot is provided by the parent."
    }
    else {
      this.slotsText = "Content for the 'topSlot' slot is NOT provided by the parent."
    }
  }
}
</script>

<style scoped>
div {
  width: 80%;
  border: dotted black 1px;
  margin: 10px;
  padding: 10px;
  background-color: lightgreen;
}
#resultDiv {
  background-color: white;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'
import SlotComp from './components/SlotComp.vue'

const app = createApp(App)
app.component('slot-comp', SlotComp)
app.mount('#app')