Forwarding slots to Custom Elements

[vonBrax]

Hi,

I wanted to open an issue, but decided to gather some feedback first - and maybe an acceptable working solution?

I'm developing a Vue component library for internal use in our company. Our library is a simple wrapper around another library that exports Custom Elements. So we wrap the element properties, events and, of course, slots.

But we are currently having a hard time trying to forward Vue component slots to the webcomponent slots. This is more an ergonomic/usability problem than an issue per se.

TLDR: We need a way to set a slot attribute on every direct descendant of a Vue slot element

Reproduction https://stackblitz.com/edit/bolt-vue-5ysf9snf?file=README.md

For example, let's say we have a custom-dialog custom element, with a slot for the header, body (default) and footer. So we create a similar Vue component:

<script setup lang="ts">
import 'path/to/custom-dialog.js';

defineSlots<{
  header?: () => any;
  default?: () => any;
  footer?: () => any;
}>();
</script>

<template>
<!-- eslint-disable vue/no-deprecated-slot-attribute -->
<custom-dialog>
  <div v-if="$slots.header" slot="header"><slot name="header"/></div>
  <slot />
  <div v-if="$slots.footer" slot="footer"><slot name="footer"/></div>
</custom-dialog>
</template>

While this solution works, we need to add an extra div element wrapping the Vue slot, so that we can set the slot attribute and it ends up in the right place inside the custom element.

The problem with that solution, is that some of the exported custom elements have styles that rely on the DOM structure and our extra div break some of these styles.

What we ideally would want was something similar to:

<template>
<custom-dialog>
  <slot name="header" slot="header" />
</custom-dialog>
</template>

... and then every direct "child" of the slot element would receive the slot attribute

But that doesn't work. I already been through a lot of similar issues around this, so I understand that the framework's opinion here is that the Component should have no knowledge about what it goes inside the slot, they should be isolated from each other.

While I understand the prerogative, it is also a fact that in the end, both Component and the slotted content will have a parent-child relationship in the DOM tree, and in a way one affects the other, so I don't think that is right to have such a strict level of isolation between them. While not recommended - or considered a best practice - to mess with the contents of a slot, I also think that Vue as a framework that aims to increase web-development speed and productivity, should not make it that difficult if a developer do wants to interact with a slotted content somehow for whatever reason.

I spent days already searching for solutions, reading documentation, reading source code, speaking to AI tools, and trying to develop a working solution to this problem, and although I did manage to do it, it still feels hacky and unsafe in some degree - my solution could in theory lead to an infinite rendering loop.

I've created a small reproduction: https://stackblitz.com/edit/bolt-vue-5ysf9snf?file=README.md

There I show the different approaches I took to find a working solution, the last one (ParagraphWrapper5.vue) being the one that works, but it's hacky and potentially dangerous.

Apart from what is in the reproduction link, other solutions that we tried are:

1. Using MutationObserver to set the slot attribute in the slotted elements

• Problem 1: For our use case, the attribute needs to be set before the elements is added to the DOM
• Problem 2 : We would still need a wrapper ref element to target the slotted content

2. Let the app consuming the library components set the slots attributes, for example:

<template>
<CustomDialog>
  <template #header>
    <h2 slot="header">Dialog header</h2>
  </template>
  <p> Dialog body. Confirm some action? </p>
  <template #footer>
    <button slot="footer">Cancel</h2>
    <button slot="footer">Ok</h2>
  </template>
</CustomDialog>
</template>

• Problem 1: Not ideal, not ergonomic, error prone
• Problem 2: Not Vue-like, developer must remember that the components are not actually Vue components, but wrappers around custom elements (needs extra slot attribute)

3. Passing the slot attribute as a scoped slot prop and then "v-binding" it to every "root" slotted content

• Same issues as above

In the end my question are:

1. Is it possible to achieve that? Simply setting a slot attribute on every direct descendant of a Vue slot element, preferably in a "Vue-friendly" way, without having to rely on apps consuming the library components to do that?
2. Would this be something that the maintainers would agree to implement? Or if I did open an issue on the Vue repo, would it just be closed like many others, because this is not compatible with the framework's design philosophy/principles?