I have a setup of 3 components - Wrapper, Parent, Controls
I'm rendering a Parent inside of Wrapper via a slot and I want to be able to render the Controls inside a named v-slot in the Wrapper component. I've achieved that like so:
Parent:
<Wrapper>
<div class="parent">
<template v-slot:controls>
<Controls>
</template>
</div>
</Wrapper>
Wrapper:
<div class="wrapper">
<slot>
<div class="controls">
<slot name="controls">
</div>
</div>
This works but I want to avoid using the <template>. Removing it and replacing v-slot with the deprecated slot prop seems to also work
<Wrapper>
<div class="parent">
<Controls slot="controls">
</div>
</Wrapper>
but I'm looking for a way to achieve this cleaner syntax with v-slot instead. Is that possible or am I bound to using template?