Subscribe on changes!

Fallback attributes for slots

avatar
Mar 31st 2023

What problem does this feature solve?

The fallback attributes work for child components that's fine. The problem I intuitively wanted them to work for slots:

// FormRow.vue
<template>
    <slot class="form-row-col"></slot>
</template>

// I hoped all children will be assigned the class form-row-col:
<template>
    <smart-form :data="user">
        <form-row>
            <form-input name="name"></form-input>
            <form-input name="email"></form-input>
        </form-row>
    </smart-form>
</template>

Moreover the problem is exaggerated by multiple slot children... I would like to have some simple solution for this problem. Any workaround by the way? I definitely dont want to use scoped slots here and fallback the class manually.

What does the proposed API look like?

Make support for fallback attributes for slots.

avatar
Sep 30th 2023

Hope to see support in Vue core

Meanwhile, you can use the Slot or Primitive component from radix-vue

https://www.radix-vue.com/utilities/primitive.html https://www.radix-vue.com/utilities/slot

[!IMPORTANT] Slot, Primitive(asChild) should have one child

// FormRow.vue
<script setup lang="ts">
import { Slot } from 'radix-vue'
</script>

<template>
    <Slot class="form-row-col">
        <slot></slot>
    </Slot>
</template>