Vue.js use slot from children's children

So I have the following example:

Here is my child component. Every other ones of the following components is based upon this.

<template>
  <div class="content-box">
    <div class="boxtitlecontainer titleColor">
      <slot name="title">Title</slot>
    </div>
    <div class="insidebox boxColor">
      <slot></slot>
    </div>
  </div>
</template>

This is one of the children.

<template>
  <div class="example">
    <box>
      <div slot="title"><slot name="title">Title</slot></div>
      <slot></slot>
    </box>
  </div>
</template>

This component is directly used in my App.vue. To use <slot>s, the only way i found is this one above.

My question is: Is there a more elegant way of doing this and to not stack up div-Boxes unnecessary? I mean, I can do it with no named slots. I guess that the <slot> can be showed recursivly like content -> slot(1st children) -> slot(2nd children) but i have no idea about how to do it with named slots.

Thanks in advance for any help.