<template>
  <div>
    <h3>Scoped Styling</h3>
    <p>This p-tag belongs to 'App.vue'</p>
    <comp-one />
    <comp-two />
  </div>
</template>

<script></script>

<style></style>                  

<template>
    <p>This p-tag belongs to 'CompOne.vue'</p>
</template>

<script></script>

<style scoped>
    p {
        background-color: pink;
        width: 150px;
    }
</style>                  

<template>
    <p>This p-tag belongs to 'CompTwo.vue'</p>
</template>

<script></script>

<style></style>                  

import { createApp } from 'vue'

import App from './App.vue'
import CompOne from './components/CompOne.vue'
import CompTwo from './components/CompTwo.vue'

const app = createApp(App)
app.component('comp-one', CompOne)
app.component('comp-two', CompTwo)
app.mount('#app')