Any examples of how Vue's slotting works inside other frameworks?

I’m just starting to play with this, it looks great! I’m running into a few issues trying to integrate it into my setup, and am looking for some feedback. I don’t know if the issue is specifically to vue-custom-element or in Vue itself, but I’ll start here; feel free to tell me to go elsewhere 😃

My use case: I’d like to build components in Vue, wrap them in vue-custom-element, and use them inside my AngularJS 1.x app (and elsewhere). In particular, I’d like to build Vue components with slotted areas that I can project content that’s “owned” by Angular.

So the setup is:

<angular-app>
  <vue-component>
    <another-angular-component></another-angular-component>
  </vue-component>
</angular-app>

Here’s an example: http://plnkr.co/edit/FzvS3WQoZ3xg6IGmUpKZ?p=preview

In this case, <a-app> is an Angular component, whose template contains <v-groupbox>, a Vue component wrapped as a Custom Element. <v-groupbox> in turn has a slot, into which I’m projecting <a-nested>, another Angular component.

In Chrome this appears to work fine, but in Firefox, Edge, and IE11 the Angular bindings don’t work when slotted inside a Vue component. For example, the buttons have an ng-click event that should call an Angular controller, but they never fire.

I thought it might be a polyfill issue, and have tried tried both document-register-element and @webcomponents/custom-elements; neither appears to work.

So! This is a roundabout way of requesting your help debugging what might be going on. We’re researching ways of creating framework-independent components, but if we can’t get this interop to function we’ll have to drop Vue from our list. Happy to answer any questions regarding the AngularJS code.

Thanks!

[karol-f]

Thanks, will think about it. Regards.

[dennisbaskin]

@thedamon we were able to make it work for us, but have not applied at scale. We used Vue with vue-custom-element as a prototype, and eventually went on to use Stencil.js with full on web-components approach (including shadow dom and custom elements).