I'm developing a custom table feature that allows users to customize <td> elements using a slot. Here's the current setup:
<tbody>
<tr v-for="(item, key) in items">
<slot :item=item">
<td v-for="(header, headerKey) in variableHeaders"
:class="{
veryImportantClass: condition > 5,
}">
{{item.text}}
</td>
</slot>
</tr>
</tbody>
To utilize this slot, I have implemented the following code:
<my-component
:headers="headers"
:items="items">
<template slot-scope="prop">
<td :class="{ aClassAddedByAUser: true }" v-for="(header, headerKey) in headers" ...>
{{ prop.item.text }} with some text
</td>
</template>
</my-component>
The challenge is that the inclusion of the mandatory veryImportantClass for each <td> created by users in the slot increases complexity.
Is there a simple way to automatically apply this class to all user-provided <td> elements within this scope?