Reuse "virtual slots"

[kogratte]

Hey there!

I would like to write a component that may reuse some of its child's inner slot contents.

Let me elaborate.

I wrote this piece of code, let's say, root component.

<script setup lang="ts">
type FooType = InstanceType<typeof ZettaConfigSection>;
const container = useTemplateRef<FooType>("container");

const childs = computed<FooType[]>(() => {
  return container.value?.childs || [];
});


</script>

Then, I also wrote a "child component", like below:

<script setup lang="ts">
const childs = ref<ComponentInstance<typeof currentInstance>[]>([]);

function register(instance: ComponentInternalInstance) {
  childs.value.push(instance);
}

function unregister(instance: ComponentInternalInstance) {
  childs.value = childs.value.filter((c) => c.uid !== instance.uid);
}


defineExpose({
  register,
  unregister,
  childs,
});


</script>

this way, I can use something like that:

<template>
   <root-component>
      <child-component>A</child-component>
      <child-component>
          B
          <child-component>B1</child-component>
          <child-component>B2</child-component>
      </child-component>
</root-component>
</template>

This way, I can have a single entry point and add some stuff based on child components. This is very useful when creating some kind of scrollable automation. Anyway.

I want to be able to get a child slot content from the root one.
In order to do so, what I did is similar as this:

<component :is="child.slots['name']" />

It works well if the target slot has been rendered, but not in case I'm using a "shadow slot", IE, a slot that does not need to be rendered on the final component, but may be specified for some reason, let's say:

<root-component>
    <div><component :is="child[0].slots['hiddenSlot']" />
    <child-component>
         <template #hiddenSlot>Some content</template>
        <!-- [...] -->
    </child-component>
</root-component>

In this very specific case, I need to run the slot function and extract content this way:

 if (Object.keys(slots).includes("hiddenSlot")) {
      const a = slots["hiddenSlot"]();
      let ptr = a[0];
      while (ptr && Array.isArray(ptr.children)) {
        ptr = ptr.children[0];
      }
      return ptr?.children;
    }

This post is because I cannot understand the underlying logic. Why should I deep dive recursively? Is there an elegant way to achieve such a result? If someone can enlighten me...