My component is simple - it just adds styling to a slot. The styling part is straightforward: it adds padding, margin, border, and background color based on the props passed. Right now, there is a wrapper component with a default slot inside. We bind classes and inline styles to the component, and its :is prop is set to div. While this setup gets the job done, adding an extra div is not ideal as we use this component frequently and it clutters the DOM.
I want to use the div wrapper only if the needContainer prop is set to true. To achieve this, I plan to implement a render function which will render the wrapper only when necessary. However, I am unsure how to render slots as the first parameter of the function needs to be a wrapper element. Additionally, I am unsure if it is possible to apply classes and inline styles directly to the slot content.
Below is my initial code:
<template>
<component
:is="div"
:class="classes"
:style="styles"
>
<slot />
</component>
</template>
And here is what I have attempted so far:
render (createElement) {
if (this.needContainer) {
return createElement('div', { attrs: { class: this.classes }, style: this.styles }, this.$scopedSlots.default())
} else {
return createElement('template', {}, this.$scopedSlots.default())
}
}
UPD
I have also tried using a functional component instead of the component wrapper. While this functional component renders the slot content correctly and without a wrapper, I am struggling to apply styling directly to the slot element inside the render function.
Here is the updated template:
<template>
<ConditionalWrapper
:tag="div"
:classes="classes"
:styles="styles"
:add-container="addContainer"
>
<slot />
</ConditionalWrapper>
</template>
Functional component added:
components: {
ConditionalWrapper: {
name: 'ConditionalWrapper',
functional: true,
render: (h, ctx) => {
if (ctx.props.addContainer) {
return h(ctx.props.tag, { class: ctx.props.classes, style: ctx.props.styles }, ctx.scopedSlots.default())
} else {
return ctx.children[0]
}
},
},
},