Closed ihardyslide closed 7 months ago
@ihardyslide, interesting issue, it will take a few days for me to start reviewing the issue, but it seems solvable
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
@ihardyslide pls let me know if I can close this issue
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.
So you would like to have the vue slots functionality as part of the web-component, right ? also slots name feature?
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!
@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
New version is up with slots support https://www.npmjs.com/package/vue-web-component-wrapper
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:![image](https://github.com/EranGrin/vue-web-component-wrapper/assets/1192287/09aabade-ebba-4dc6-8ffd-51c04ee380fd)
But the resulting context which I inspected after the![image](https://github.com/EranGrin/vue-web-component-wrapper/assets/1192287/a519e516-ba5f-4bc2-a4fa-f410d471dcfd)
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:
Thanks & BR