Scoped Slot Alternatives?

[byfoz]

Hi Evan,

Are scoped slots completely unsupported? It states that they can't be used at the moment in the docs.
Are you able to elaborate on the main roadblock to this?

I've got a perfect use-case for embedding a vue.js component as a snippet for people to paste into their website but it relies on scoped slots. I basically want them to provide a template and I provide all of the hooks for integrating with my API.

If this is actually impossible, is there any alternative? I'd like to use the reactivity of Vue without mounting to someones full page (since they might already be using it!)

Thanks in advance :)

[steamypassion]

React have ReactShadow. Angular have native support. As Vue is top 3, it should also be supported in roadmap.
I think that I also consider similar with wrapped dynamic component inside the shadow dom.

<template v-for="(child, index) in listOfComponents"> <Shadow> <Component :is="child"></component> </Shadow> </template>

[mkamensky]

@CImrie Did happen to find a solution here? Thanks

[smallscript]

I wrote the solution for this for Vue with a lot of explanatory background on it.

• https://forum.vuejs.org/t/plugin-for-using-your-vuecomponents-as-native-dom-webcomponents/59716
• https://github.com/Smallscript-Corp/vue-web-component-plugin

[byfoz]

@mkamensky Unfortunately not really - I ended up using https://karol-f.github.io/vue-custom-element/#/ but accepted that I couldn't provide a renderless component that people could theme themselves. Haven't looked into it in a while though.

@smallscript does your project let you use scoped slots when dropping a component on an external page?

E.g.

<custom-element v-slot="props">
    <div class="user-custom-theme">{{ props }}</div>
</custom-element>

[mkamensky]

@CImrie thanks...

[nadar]

Has there something changed since version 3.0 maybe? Scoped slots would be such a powerful option to customize the web components content 😞