How to wrap a component in a transition by default?

Question

Vue.js

I have a certain component, it is used a lot on the site and I need to wrap it by default in transition, I did something like this:

<template>
  <transition appear name="opacity">
    <div class="modalBox">
      <transition appear name="scale">
          <slot></slot>
          /* предположим тут все блоки которые есть в компоненте */
      </transition>
    </div>
  </transition>
</template>

But the input, label and button styles are not displayed in DevTools and do not work in the block itself, while the styles of other blocks work