<template>
  <h1>Named Scoped Slots</h1>
  <p>Named scoped slots "leftSlot" and "rightSlot" send different data to App.vue from the SlotComp.vue component.</p>
  <hr>
  <slot-comp>
    <template #leftSlot="leftProps">
      <div>{{ leftProps.text }}</div>
    </template>
    <template #rightSlot="rightProps">
      <div>{{ rightProps.text }}</div>
    </template>
  </slot-comp>
</template>

<script></script>

<style>
  #app {
    width: 300px;
  }
  #app > div {
    display: inline-block;
    background-color: lightgreen;
    width: 100px;
    padding: 10px;
    margin: 10px;
  }
</style>                  

<template>
    <slot 
        name="leftSlot"
        :text="leftText"
    ></slot>
    <slot 
        name="rightSlot"
        :text="rightText"
    ></slot>
</template>

<script>
export default {
    data() {
        return {
            leftText: 'This text belongs to the LEFT slot.',
            rightText: 'This text belongs to the RIGHT slot.'
        }
    }
}
</script>

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