Styling slot content in Vue 3

To make our modal reusable, we've provided a slot for content. In the App component we've put a paragraph in the slot for content.

src/App.vue

<template>
  <button @click="toggleModalState">Open modal</button>
  <teleport to="#modal-wrapper">
    <modal v-if="modalOpen">
      <p>Hello, I'm a Vue 3 modal window.</p>
    </modal>
  </teleport>
</template>

Scoped CSS

Back in the modal component, let's begin to style that content by adding a style tag to the component.