Slots stripped from rendered DOM

[ihardyslide]

Hi,

I found your library while digging through GitHub issues. It helped me making plugins work for the component library I am working on migrating to web components, thank you!

Unfortunately I have one showstopping issue left, which I am unable to find a solution for. I just can't seem to get slots working, even though I am using native slot syntax. There are simply no <slot> tags rendered in my resulting web-component DOM. If I put some fallback text inside the slot, only the fallback text will be rendered without slot tags. If I manually add the slot tags to the HTML via the browser dev-tools, everything is working as it should.

It seems like the slots are somehow thrown away, after the components go through your library code. Because if I log the component to the console one step earlier, I can see the slots in the rendering function:

But the resulting context which I inspected after the Object.assign()s are happening, is missing the slots:

I am running out of ideas, so that's why I wanted to ask if you maybe had some issue like this before?

This is the test component I am using to test this:

<template>
    <div class="style">
        <slot>FALLBACK</slot>
        <div>
            <slot name="abc">FALLBACK2</slot>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    setup(props, context) {
        console.log("INSIDE SETUP CONTEXT", context);
        console.log("INSIDE SETUP PROPS", props);
    },
};
</script>

<style lang="scss" scoped>
.style {
    width: 50px;
    height: 50px;
    background-color: var(--background-color, red);
}
</style>

Thanks & BR

[EranGrin]

@ihardyslide, interesting issue, it will take a few days for me to start reviewing the issue, but it seems solvable

[EranGrin]

I did some quick test for the slots function in the app components (not the slots of the custom element) and it seems like it is running well, check the route 4 in this link https://stackblitz.com/edit/vue-web-component-wrapper-gbmjwn?file=README.md&startScript=vite-demo

[EranGrin]

@ihardyslide pls let me know if I can close this issue

[dervondenbergen]

Hey, colleague of @ihardyslide here. I modified your stackblitz, to show the issue there: https://stackblitz.com/edit/vue-web-component-wrapper-fq3d16

My changes are in index.html line 30 onwards, App.vue line 27-31 and main.ts line 22-23

When opening the browser devtools, you see, that there is no <slot /> element inside the shadow dom of <my-web-component>. However, when defining the custom element directly using only vues defineCustomElement (my changes in main.ts), the slots get created.

You can see in the screenshot, that the <slots-component> shows the slots with an aditional reveal button and a slot button beside the element, which matches a slot. Downside: you can't use plugins, styles, ….

But we might found already a solution ourselves in the meantime, which we are currently testing. If this works, we could let you know.

[EranGrin]

So you would like to have the vue slots functionality as part of the web-component, right ? also slots name feature?

[ihardyslide]

Hi, we actually want to have the native slots functionality working in the web-components, as described here. And yes, named slots should be working too.

But as Felix said, we already got it working by building on top of your solution. So if you think it is not a problem with your library, you can close the ticket.

Thanks!

[EranGrin]

@ihardyslide great to hear you have a solution, you are very welcome to open a PR or share your solution and I might be able to integrate it in the lib

Thanks

[EranGrin]

New version is up with slots support https://www.npmjs.com/package/vue-web-component-wrapper