Accessing a slot's actual children programatically

[theoephraim]

I'm building some kind of weird layout utility components (these are functional render fn only components) and have run into some tricky situations...

Basically I'm trying to access child elements within a slot so that I can do things like wrap each child in a div, insert extra divs between elements, count the number of children, etc... Some of the use cases I need can be solved with css only, but let's forget about that for a second and just assume this could be a useful pattern in some scenarios.

While I can access a slot's direct children (const children = slot.default?.() || []), in order to actually get the children elements, I need to:

• filter out comments
• filter out children that are not actually rendered due to v-if
• unwrap / descend (deeply) into fragments, both loops (v-for) and templates

Most of this is doable and seems to work fine, however I've run into two issues:

Issue 1 - I have no way of detecting a component that has a root node hidden by v-if (ex: <HiddenThing /> which internally is <div v-if="false">...)

Issue 2 - in some very specific scenarios, the children are not always re-rendering properly (the vnode still points to the previous version of the component), but only in the built version of my app?! (ie works in vite dev but not in vite build). I've been unable to create a minimal reproduction but was able to fix the issue by wrapping the child in an additional Fragment. This seems like a deep vue internals bug, but I can't quite track down what is happening.

reproduction here:
https://stackblitz.com/~/github.com/theoephraim/vue-functional-rendering-test

As I mentioned I've been unable to get issue 2 to reproduce in this minimal environment - but this is why theres a lot of extra stuff in there (pinia, api requests, etc). I've commented out the extra Fragment fix for now but it's there.

[liulinboyi]

Can you provide a minimum reproduction such as a playground or git repository? such as use playground.

[liulinboyi]

@liulinboyi - That should not make a difference.

The main issue I'm struggling with is that I can't detect that <ToggledVisiblityThing> isn't actually going to be rendered. I can actually sniff the shapeFlag and children to do it, but that feels extremely brittle.

You can use like the follow code to detect that <ToggledVisiblityThing> is rendered or not:

Stack.vue

import { h, cloneVNode, ref } from "vue";
......
if (children[i].type.__name === "ToggledVisibilityThing") {
  const ToggledVisibilityThingRef = ref();
  wrappedChildren.push(
    cloneVNode(h(children[i]), {
      ref: ToggledVisibilityThingRef,
    })
  );
}

ToggledVisibilityThing.vue

<template>
  <div ref="comRef" v-if="show">
    <slot />
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';

const props = defineProps({
  show: Boolean,
});

const comRef = ref()

defineExpose({
  com: computed(() => {
    return comRef.value
  })
})
</script>

<style lang="less" scoped></style>

[theoephraim]

@liulinboyi - Thanks for posting this, but that solution is not really an option here. The idea is that layout components like this should be extremely generic and work with anything you put inside. Any other components used inside of them shouldn't have to expose anything or know anything about it.

[liulinboyi]

@liulinboyi - Thanks for posting this, but that solution is not really an option here. The idea is that layout components like this should be extremely generic and work with anything you put inside. Any other components used inside of them shouldn't have to expose anything or know anything about it.

If you write like the follow code:

<template>
  <div ref="comRef" v-if="show">
    <slot />
  </div>
</template>

<script lang="ts">
import { computed, ref, defineComponent } from "vue";

export default defineComponent({
  name: 'ToggledVisibilityThing',
  props: {
    show: { type: Boolean, required: false },
  },
  setup() {
    const comRef = ref();

    return {
      comRef,
      com: computed(() => {
        return comRef.value;
      }),
    };
  },
  mounted() {
    this.show;
  },
});
</script>

<style lang="less" scoped></style>

don't use setup, you can get the full component instance through ref.

[theoephraim]

The parent component is a general purpose tool and must not be coupled at all to the children. Meaning I need to be able to determine if the child component is being rendered or not from the parent without having the child conform to any api / expose anything special...

[liulinboyi]

The parent component is a general purpose tool and must not be coupled at all to the children. Meaning I need to be able to determine if the child component is being rendered or not from the parent without having the child conform to any api / expose anything special...

You want Accessing a slot's actual children programatically, I want to know the actual children is Component instance or vnode?
You can use the follow code overwrite the slotRenderFunction and get the slot in the new slotRenderFunction.

import { h, cloneVNode, ref } from "vue";
......
if (children[i].type.__name === "ToggledVisibilityThing") {
  const oldSlotRender = children[i].children.default;
  children[i].children.default = (...args) => {
    // if the slot is render this function will execute
    // you can get the vnode in this function
    const vnode = oldSlotRender(...args);
    return vnode
  };
  wrappedChildren.push(h(children[i]));
}

or

import { h, cloneVNode, ref } from "vue";
......
if (children[i].type.__name === "ToggledVisibilityThing") {
   // you can get the slot's instance from the `slotRef `
  const slotRef = ref();
  const oldSlotRender = children[i].children.default;
  children[i].children.default = (...args) => {
    // if the slot is render this function will execute
    // you can get the vnode in this function
    const vnode = cloneVNode(oldSlotRender(...args)[0], { ref:  slotRef  });
    return [vnode]
  };
  wrappedChildren.push(h(children[i]));
}