Within my component, I am working with a default slot and attempting to enhance the layout by wrapping each item in the slot within a div. However, I am facing an issue where I need to retrieve the classes of one of the slot elements, but the VNode element does not have elm or $el available during runtime as it remains undefined.
Here is an example of the parent component template structure:
<Parent>
<span>child 1</span>
<p class="push">child 2</p>
<Child>child 3</Child>
</Parent>
The desired rendered output should look like this:
<Parent>
<Wrapper>
<span>child 1</span>
</Wrapper>
<Wrapper class="push">
<p>child 2</p>
</Wrapper>
<Wrapper>
<Child>child 3</Child>
</Wrapper>
</Parent>
Currently, my render function successfully wraps each element, however, I am struggling to access the classes within the slot children during rendering.
render(createElement) {
const childs = [];
this.$slots.default.forEach(item => {
if (item.tag) {
console.log(item.elm, item.componentInstance); // both returns undefined
childs.push(createElement("Wrapper", [item]));
}
});
return createElement(this.tag, { class: this.classes }, childs);
}
So, how can I effectively access the classes of the slot elements within the render function?