<template>
  <h1>App.vue</h1>
  <p>The component has two slots, and the template element is used to assign content to both.</p>
  <slot-comp>
    <template v-slot:topSlot>
      <div>
        <p>Tigers are beautiful!</p>
        <img src="/tiger.svg" alt="tiger" width="100">
      </div>
    </template>
    <template v-slot:bottomSlot>
      <div>
        <p>Whales can be very big</p>
      </div>
    </template>
  </slot-comp>
</template>

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

<template>
  <hr>
  <h3>Component</h3>
  <slot name="topSlot"></slot>
  <slot name="bottomSlot"></slot>
</template>                  

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')