When working with Named Slots in Vue (using the older, more verbose API for component slots), if there is a reusable component with a template structured like this:
<template>
<div v-for="field in formFields">
<slot name="`${field.key}_PREPEND`">
<span hidden></span>
</slot>
<slot name="`${field.key}_FIELD`">
<slot name="`${field.key}_LABEL`">{{ field.label }}</slot>
<slot name="`${field.key}_CONTROL`">
<input v-if="field.type === 'text'" v-model="model[field.key]"></input>
<input type="checkbox" v-else-if="field.type === 'checkbox'" v-model="model[field.key]"></input>
</slot>
</slot>
<slot name="`${field.key}_APPEND`">
<span hidden></span>
</slot>
</div>
</template>
(this is basically a simplified version of a component that generates auto-forms)
This component can be reused like this:
<auto-form
:fields="someArray"
:model="someObject"
>
<template slot="Name_PREPEND"> This goes before the name field </template>
<template slot="Name_FIELD"> This content is not showing up; it defaults to the slot markup</template>
<template slot="Name_APPEND"> This goes after the name field </template>
</auto-form>
However, the slot "${field.key}_FIELD" is not rendered with the above markup using <auto-form>.
When modifying the inner markup of the _PREPEND field as follows:
<slot name="`${field.key}_PREPEND`">
<span hidden>
<slot name="`${field.key}_CONTENT`"></slot>
</span>
</slot>
The _PREPEND slot cannot be overridden (but _CONTENT can).
Is this a constraint of Vue component slots? Are nested component slots not supported?
In this scenario, this limitation prevents a developer from overriding both the control and label simultaneously via the _FIELD slot (I wanted to add logic to make a field conditional based on other values in the form)