Restricting Component type for slots

[Nam-Hai]

To make Component with slots more consistent, it would be great to be able to restrict the SlotedComponent to certain type of component.

<ParentComponent>
  <SlotedComponent />
</ParentComponent>

Would be neat to be able in ParentComponent to type its slots, so you could restrict slots to ComponentA | ComponentB, and if you are passing ComponentC or just a string it create and error (at least in the IDE).

I thought defineSlots's return types would do that, but it seems to be a not fully working feature (or I did not understand defineSlots which could be the case).

I am aware that I could theoricaly do this with props, and it actually works fine that way. But I think it make more sense "visually" to pass it with slots as it will be rendered.

[ShGKme]

There could be 2 checks:

1. SlotedComponent is used ONLY in ParentComponent
2. ParentComponent has ONLY SlotedComponent in content

Point 1 is quite simple to implement. You can provide something from ParentComponent and in SlotedComponent check if there is something to inject. If there isn't - show warn or even throw error.

P.2, however, is more tricky and has edge cases.

What if Sloted component is passed to the slot but in wrapped to another component? Would you consider it valid in this case?

<ParentComponent>
  <Container>
    <SlotedComponent />
  </Container>
</ParentComponent>

If this is not valid and SlotedComponent must be the direct content - you can check this.$slots.

More edge case here is dynamic content, e.g.

<ParentComponent>
  <template v-if="foo">
    <SlotedComponent />
    <SlotedComponent />
  </template>
  <SlotedComponent v-else />
</ParentComponent>

In this case you need to check this.$slots recursively.

---

Nevertheless, by design in Vue component should not know that it has in its slot. It just has a place to render passed content.

[Nam-Hai]

Yes, there is ways to make it work at runtime. But I think for a best DX would be to have the error pop in the IDE.

Should the check be recursive ? I don't know, I'd say no and each component should check for its direct children.

Nevertheless, by design in Vue component should not know that it has in its slot. It just has a place to render passed content.
I'm very interested to know what are the idea that pushed for this philosophy. Because I'd argue adding an option to type check children would not prevent you to make children any by default