Creating a VueJS functional component to emulate div behavior involves setting its class based on the props it receives. For example:
<MyDiv textAlign="left">Div with left aligned text</MyDiv>
Transforms into:
<div class="text-left">Div with left aligned text</div>
However, if the MyDiv component is nested within another component like Card.vue, and the parent component also has a class attribute set:
<template>
<MyDiv display="inline-block" textAlign="center">
<slot />
</MyDiv>
</template>
The class attribute value on MyDiv gets overridden by the class received by Card, resulting in issues when trying to style the element as intended.
This:
<Card class="cool-style">Card content</Card>
Will render as:
<div class="cool-style">Card content</div>
Instead of the desired outcome:
<div class="cool-style inline-block text-center">Card content</div>
In order to address this issue, modifications may need to be made to the MyDiv component, ensuring that its custom classes are applied even when nested within components with existing class attributes.
TL;DR
How can I ensure that my custom class is properly applied to a Vue functional component, even when it is nested within other components with their own classes?
It's worth noting that this behavior can be achieved using stateful (non-functional) components.