Fallback attributes for slots
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.
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>