Problems with slots in wrapped components about ngvue

[SmilingJoe]

So found a quick solution to this, at least when it comes to passing plain text inside of the component references tags.

Wrap your plain text content in the template where you reference the component with <span></span> tags. This will prevent the error from coming up, and cleanly pass the content through into the slot.

However, this still does not fix the issue where default content assigned into the slot does not appear, when not passed in from the template component reference.

Possible long term solution?
After playing around with the jsfiddle created by korya above, I think a workable solution to this might be to first wrap whatever contents is found in jqElement[0].innerHTML with <span></span> tags first, then run it through the compiler. The extraneous span tags can then be removed from the resulting HTML before it is injected into the DOM.

Reason:
This is caused by how AngularJS/jqLite processes bare strings without any wrapping tags around them.

It starts out with this line: https://github.com/ngVue/ngVue/blob/master/src/angular/ngVueLinker.js#L34, that attempts to have AngularJS $compile whatever the passed content is.

const html = $compile(jqElement[0].innerHTML)(scope)

This in turn is sent by Angular to the JQLite constructor, which attempts to parse it (from the angular.js file):

function JQLite(element) {
  if (element instanceof JQLite) {
    return element;
  }

  var argIsString;

  if (isString(element)) {
    element = trim(element);
    argIsString = true;      // <--- [DEBUG] This gets set to true
  }
  if (!(this instanceof JQLite)) {
    // [DEBUG] As argIsString is true, and the first character is not '<'... it throws an error
    if (argIsString && element.charAt(0) !== '<') {
      throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
    }
    return new JQLite(element);
  }

[dorayx]

I feel sorry that we will not fix this bug and <slot/> has to be deprecated because your refactored code will get harder & harder to develop, test and debug.

With <slot/> the vue components have to take care of the angular runtime and eventually those will be tightly coupled.

If you have to preserve the angular code in the vue components perhaps you could use web components as a bridge between these two runtimes :-)

[SmilingJoe]

Update: Found kind of a workaround for this issue, see my follow up comment directly below this one.

Encountering this same issue where it appears the Vue slots are not supported by ngVue.

When setup in my dev env using webpack, the specific exception I receive is:

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element
https://errors.angularjs.org/1.7.4/jqLite/nosel
at angular.js:138
at JQLite (angular.js:3231)
at compile (angular.js:9602)
at Vue.rootProps.mounted (index.js:170)
at invokeWithErrorHandling (vue.runtime.esm.js:1854)
at callHook (vue.runtime.esm.js:4213)
at mountComponent (vue.runtime.esm.js:4080)
at Vue.push../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount (vue.runtime.esm.js:8409)
at Vue._init (vue.runtime.esm.js:5012)
at new Vue (vue.runtime.esm.js:5079)

My vue-button.vue file component is defined as:

<template>
    <a class="button-primary" href="#" ><slot>Default Button Text</slot></a>
</template>

<script>
export default {
    name: 'VueButtonComponent'
}
</script>

The component is referenced in my AngularJS template as:

<vue-button-component>This is a Vue Button</vue-button-component>

If I remove the <slot>Default Button Text</slot>``` from the template definition, and the This is a Vue Button` from the component reference, I no longer get the exception - but that fails to provide Vue's slot implementation.

I am initializing my Angular app with ngVue, along with declaring the Vue component as follows:

import Vue from 'vue';
import 'ngVue';

import VueButtonComponent from './vue/vue-button.vue';
...
...
angular.module('myApp', [ngVue])
    .directive('vueButtonComponent',
        /* @ngInject */
        createVueComponent => createVueComponent(Vue.component('vueButtonComponent', VueButtonComponent))
    );

Versions used:
Angular: 1.7.4
Vue: 2.6.10
Vue-template-compiler: 2.6.10
Vue-loader: 15.7.0
ngVue: 1.6.0

[nicolaspayot]

I'm sorry but ngVue was not designed to allow AngularJS components to be rendered inside VueJS components. We've tried to add slots but it doesn't work in multiple situations: #66, due to the difference of rendering mechanism between AngularJS and Vue components.

We'll probably deprecate this experimental feature in a future release and remove it completely in the next major.

[nicolaspayot]

@dorayx what do you think about this slot issue?

[SmilingJoe]

So not sure if this is beating a dead horse, but my main issue was not directly related to injecting Angular compiled output into a Vue <slot></slot>. I was simply trying to inject a hard coded string into the slot and it would cause that exception. Wrapping my string in a <span></span> prevented the exception from occurring.

In my testing project, I am actually successfully using the following:
<my-custom-vue-component><span ng-translate="SYSTEM.TRANSLATION_KEY></span></my-custom-vue-component>

This works just fine, AngularJS is able to translate the string and inject it into the slot, span and all.

If deprecating this functionality will prevent that from working, then ngVue will be less useful for our purposes. I can see that trying to compile an entire AngularJS directive/component inside of the slot would be problematic, so if that is the reasoning then it's understandable.

[dorayx]

@nicolaspayot what do you think of it? Perhaps we need a list of slot-related caveats for developers and then fix this text-rendering issue only?

[dorayx]

@SmilingJoe your solution sounds good to fix the issue :-) and pr is welcomed

As you know, it becomes problematic to compile angular into a wrapped vue component and so slots will look buggy and confusing: some can’t be rendered while the others can :-( this functionality is a bit useless now.

[nicolaspayot]

@dorayx well, we could totally render slots with simple texts and point out caveats for other use cases in the doc 👍