search

karol-f / vue-custom-element

Vue Custom Element - Web Components' Custom Elements for Vue.js
https://karol-f.github.io/vue-custom-element/
MIT License
1.97k stars 187 forks source link

Vue-Custom-Element slots with angular directives #212

Closed LucasBerger closed 4 years ago

LucasBerger commented 4 years ago

Hey,

I was using this library for some weeks and I just now think that it may not be possible to use this library correctly with angular at least not with the version my company uses.

If I have a Vue-custom-element with a slot inside a element with a ng- directive (ng-if/ng-repeat) the named slots won't get injected and when I use default slots the content of the Vue-Element is injected twice in the Custom-Element.

Here's a Codebox to visualise the Problem: https://codesandbox.io/s/vue-custom-element-angular-450mr

Do you know any workaround for this?

Thanks in advance

karol-f commented 4 years ago

Problem is that custom element is started right away when index.html is loaded in browser, then again when angular app kicks in.

Just delay defining custom element after angular app is ready. Quick and dirty way, just to show that it is working:

angular.module("app", []);

setTimeout(() => {
  Vue.customElement("default-slot", DefaultSlot);
  Vue.customElement("named-slot", NamedSlot);
}, 2000);

https://codesandbox.io/s/vue-custom-element-angular-z92cc?file=/src/main.js