Any workaround for `slot` attribute name?

I’m trying to migrate a native web component over to vue-custom-element. It’s in use in production already, with components using the slot attribute in order to organize the layout.

Is there any workaround at the moment to allow vue-custom-element to replace these components without updating the slot attribute? Possibly rewrite the attributes using JS before the component loads?

Anyone have any experience with this? I can hack at it and try to get something working, but any pointers would be greatly appreciated.

Thanks!

[karol-f]

Unfortunately when vue-custom-element gets DOM, Custom Element is already initialized and all slots are gone from DOM. So I don’t think that we can easily pass slots HTML to Vue (please, please correct me if I’m wrong).

You can read about slots here - https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#composition-and-slots

EDIT maybe we can just parse vue component passed to vue-custom-element in search of slots (we already do that) and insert <slot> and <slot name="xyz"> before Vue init. This seems doable. I’ll try to play with it in next days. Regards

[trusktr]

Here’s how SkateJS allows use of ShadowDOM slots with Vue rendering: https://github.com/skatejs/skatejs/issues/1220

If you see the linked gist there, it hides the slot element inside a <real-slot> Vue component. You may have to get familiar with what rendererCallback is in SkateJS to understand what it is doing. rendererCallback allows a Web Component author to define how the element renders (f.e. it can render with React, Vue, Angular, etc).

It might be possible to achieve a similar sort of thing here, using a Vue component proxy like SkateJS did with the <real-slot> Vue component.