Using vue-custom-element outside vue application: default slot gives double HTML

[wbern]

Works

<mybd-message message="success">
        <div vue-slot="text">
            Hello world
        </div>
    </mybd-message>

.vue file / custom element

<template>
    <div class="alert alert_animated">
        <span class="alert__icon"></span>
        <span class="alert__text">
            <slot name="text" />
        </span>
    </div>
</template>

This works.

Not working / double output:

<mybd-message message="success">
            Hello world
    </mybd-message>

.vue file / custom element

<template>
    <div class="alert alert_animated">
        <span class="alert__icon"></span>
        <span class="alert__text">
            <slot />
        </span>
    </div>
</template>

Output:

<mybd-message
    message="success"
    vce-ready=""
>
    <div class="alert alert_animated"><span class="alert__icon"></span> <span
            class="alert__text">
            <div class="alert alert_animated"><span class="alert__icon"></span>
                <span class="alert__text"><span>Hello world</span></span></div>
        </span></div>
</mybd-message>

Workaround: use vue-slot ( named slots ).

Notes:

• I am consuming vue-custom-element tags from an angularjs 1.x codebase.
• It works fine if I only have vue components passing slots to one another.

[wbern]

After a little more research, it seems this happens when I

1. Render the custom element
2. Stop rendering the custom element (angularjs 1.x template compositioning, some ng-if)
3. Render the custom element again.

Upon second render, the content will be double.

It might be happening because of this line.

if (vueVersion >= 2) {
      var elementOriginalChildren = element.cloneNode(true).childNodes; <- contains the entire custom-element, not just the children.

[karol-f]

Hi, due to implementation, non-wrapped content passed to slots (like "Hello World" in <mybd-message message="success">Hello world</mybd-message>, is wrapped using <span>.

Currently it works like that and have low priority in TODO list. But PR's are welcome! The line needed to be adjust is https://github.com/karol-f/vue-custom-element/blob/373d59fdf03cbfcf2b45f7a32fe31e9c2238919d/src/utils/slots.js#L74

Regards!

[wbern]

@karol-f This still happens even if I wrap with \

-tags.

However, I'm starting to think that angularjs is using a cached element with the rendered content from last render.

[karol-f]

@wbern Hi, as you can see in https://codesandbox.io/s/wmz0mxn9l - when you wrap slot content (in this case <div class="wrapper">) you end up with no <span> element but provided wrapper.

Regards.