<template>
  <MyHeader>
    Hello World!
  </MyHeader>
</template>
<component name="MyHeader" lang="vue">
  <template>
    <h1>
      <slot />
    </h1>
  </template>
</component>

<!-- Button.vue -->
<template>
  <button>
    <slot />
  </button>
</template>
<component name="RoundedButton" lang="vue" export>
  <template>
    <button>
      <slot />
    </button>
  </template>
  <style scoped>
    button {
      border-radius: 20px;
    }
  </style>
</component>

<!-- App.vue -->
<script setup>
  import { RoundedButton } from "./components/Button.vue";
</script>
<template>
  <RoundedButton>
    Click me
  </RoundedButton>
</template>