slots not correctly injected in Chrome and Opera

I created a Vue component “simple-form” for building dynamic forms. It’s using vue-custom-element in order to be able to inject it in my websites. To be able to specify a custom header, footer and other stuff for each form, I’m defining several slots in the components template.

Basically, the template looks something like this:

<div>
	<slot name="header"></slot>
	<h1>title</h1>
	<slot name="intro"></slot>
	<form>
		<div id="startmsg">
		<slot name="startmsg"></slot>
		</div>

		<!-- Dynamic form content goes here -->

		<slot name="endmsg"></slot>
	</form>
	<slot name="footer"></slot>
</div>

Everything works fine, except that in Chrome and Opera the slots are not correctly injected.

This is how I use the component in my website:

<simple-form config="my-config">
    <template slot id="header"><div>form header</div></template>
    <template slot id="intro"><div>form intro</div></template>
    <template slot id="startmsg"><div>This is a start message</div></template>
    <span vue-slot="startmsg"><div>This is a start message</div></span>
    <template slot id="endmsg"><div>This is an end message</div></template>
    <span vue-slot="endmsg"><div>This is an end message</div></span>
    <template slot id="footer"><div>form footer</div></template>
</simple-form>

For debugging purposes I’m using the startmsg and endmsg slots in 2 ways: as a template tag (1) and as a named slot (2)

(1) <template slot id="startmsg"><div>This is a start message</div></template>
(2) <span vue-slot="startmsg"><div>This is a start message</div></span>

In the attached screenshot you can see that the startmsg is not injected inside the div tag with id=“startmsg”. Instead, all slots are injected at the end of the component, right before the closing tag </simple-form>

Moreover, when using a template tag (1) the slot content is inserted inside a “#document-fragment”, which is not visible in the browser.

Any ideas what’s happening here?

[aki77]

I have taken the following workarounds.

// before
Vue.customElement('slot-component', slotComponent);

// after
import { getProps } from 'vue-custom-element/src/utils/props'

const asyncComponentDefinition = (component) => () => new Promise((resolve) => {
  setTimeout(() => {
    resolve(component)
  }, 0)
})

Vue.customElement('slot-component', asyncComponentDefinition(slotComponent), {
  props: getProps(slotComponent).camelCase
});

[jstiers]

I have taken the following workarounds.

// before
Vue.customElement('slot-component', slotComponent);

// after
import { getProps } from 'vue-custom-element/src/utils/props'

const asyncComponentDefinition = (component) => () => new Promise((resolve) => {
  setTimeout(() => {
    resolve(component)
  }, 0)
})

Vue.customElement('slot-component', asyncComponentDefinition(slotComponent), {
  props: getProps(slotComponent).camelCase
});

Wow, awesome to see this community active! Thank you @aki77 , I’ll try that coming week.