<template>
  <h1>App.vue</h1>
  <p>The component has two &lt;div&gt; tags with one &lt;slot&gt; in each.</p>
  <slot-comp #topSlot>'Hello!'</slot-comp>
</template>

<script></script>

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

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

<script></script>

<style scoped>
    div {
        height: 30px;
        width: 50%;
        border: dotted black 1px;
        margin: 10px;
        padding: 10px;
        background-color: lightgreen;
        font-weight: bold;
    }
</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')