slots not correctly injected in Chrome and Opera #166

santo74 · 2019-05-20T09:55:26Z

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

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?

The text was updated successfully, but these errors were encountered:

karol-f · 2019-05-20T10:52:14Z

Hi, can You prepare example on e.g. https://codesandbox.io/s/jv4nvmp74v or GitHub repo?

Also are you sure that you are using vue-slot and not slot anywhere? Please do not use slot.

santo74 · 2019-05-20T12:42:05Z

Hi karol-f,
I created the smallest possible example and modified the code in https://codesandbox.io/s/vue-template-lni9w accordingly.
However, as you will see the example will run fine in codesandbox.

The issues with Chrome and Opera that I'm referring to only occur when I build the component (npm run build) and include the resulting js file (dist/HelloWorld.umd.min.js) in another website.
(Obviously I'm also including vue.js and document-register-element in that website).
Just like this:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.13.2/document-register-element.js"></script>
    <script src="/assets/scripts/hello-world.js"></script>
  </head>
  <body>
    <hello-world msg="hello there"}}">
        <template slot id="header"><h3>Header</h3></template>
        <template slot id="footer"><h3>Footer</h3></template>
    </hello-world>
  </body>
</html>

=> This works fine in Firefox and Edge, but not in Chrome and Opera

santo74 · 2019-05-20T12:46:13Z

Just FYI: it did work in Chrome and Opera until recently.

karol-f · 2019-05-20T12:50:12Z

Can You confirm that You are not double loading Vue library?

santo74 · 2019-05-20T12:57:34Z

Yes, I can confirm that.
I'm only loading the Vue library in the main html file, nowhere else.
If I comment that line, I get the error "cannot read property 'use' of undefined, indicating that Vue is not loaded

karol-f · 2019-05-20T13:00:40Z

From a quick look there is invalid HTML in example above: <hello-world msg="hello there"}}">

If it's not causing it, can You please prepare GitHub repo with NOT working example and I will take a look at it?

santo74 · 2019-05-20T13:16:38Z

I'm sorry, the "}} shouldn't be there, that's probably a copy/paste issue.
I can confirm it's not in my code, so that's not the issue.

I'm not sure how I can prepare a GitHub repo. All there is to reproduce the issue is building the hello-world component as it is currently defined in the codesandbox link https://codesandbox.io/s/vue-template-lni9w and then include it in the following html page:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.13.2/document-register-element.js"></script>
    <script src="/assets/scripts/hello-world.js"></script>
  </head>
  <body>
    <hello-world msg="hello there">
        <template slot id="header"><h3>Header</h3></template>
        <template slot id="footer"><h3>Footer</h3></template>
    </hello-world>
  </body>
</html>

santo74 · 2019-05-22T21:11:10Z

@karol-f were you able to reproduce it with the above instructions?

karol-f · 2019-05-23T19:57:17Z

Sorry, not yet, I still have it on my list.

santo74 · 2019-05-23T21:10:13Z

Ok, no worries. Let me know if you need more information.

santo74 · 2019-06-18T20:39:34Z

@karol-f I just noticed the status of this issue is still "waiting for feedback". Maybe you can change this to "investigating" or something like that?

jstiers · 2020-03-26T13:04:36Z

@karol-f Hey Karol, thank you so much for your work! Any update on the slot issue?

aki77 · 2020-03-28T07:23:28Z

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 · 2020-03-28T14:26:58Z

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.

allenhwkim · 2020-09-09T03:37:53Z

@aki77 you are awesome!!
@karol-f FYI, I have tried this approach and it's working for me. The following is what I have done successfully

HelloWorld.vue this will go into <slot></slot>

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: { 
    msg: String 
  }
};
</script>

XButton.vue. this has <slot></slot>

<template>
  <div class="host">
    <slot></slot>
    <span> {{title}} {{ count }} {{times}}. </span>
  </div>
</template>

<script>
export default {
  name: 'XButton',
  props: ['title'], // passing data through props
  data: function() {
    return { // data must be a function
      count: 0
    }
  },
  computed: { // getters
    times: function() { 
      return 'times'
    }
  }
};
</script>

<style scoped>
.host {
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: 4px 4px 8px #ccc;
}
</style>

custom-element-build.js. this uses @Kai77 method

import Vue from "vue";
import vueCustomElement from 'vue-custom-element';
import { getProps } from 'vue-custom-element/src/utils/props'
import HelloWorld from '../components/HelloWorld';
import XButton from '../components/XButton';

Vue.use(vueCustomElement);

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


Vue.customElement('hello-world', HelloWorld);
// Vue.customElement('x-button', XButton);

Vue.customElement('x-button', asyncComponentDefinition(XButton), {
  props: getProps(XButton).camelCase
});

command

$ vue-cli-service build --target lib --inline-vue --name elementsX custom-element-build.js

html

<body>
  <x-button>
    <hello-world msg="Hello Custom Element"></hello-world>
  </x-button>
</body>

Successful Result withasyncComponentDefinition

Erroneous Result without asyncComponentDefinition

allenhwkim · 2020-09-09T04:29:15Z

@aki77 can you explain how your code work?

aki77 · 2020-09-09T04:54:36Z

In Chrome, the child elements does not seem to be present yet at the time of the connectedCallback event.
This is why we're working around it by executing a delayed execution.
One thing to keep in mind is that the original element will be drawn for a moment before the Vue component is drawn, so you need to be careful.

this.$slots.default returns undefined under chrome #162 (comment)
vue-custom-element/src/utils/createVueInstance.js

Line 41 in d803a29

const elementOriginalChildren = element.cloneNode(true).childNodes; // clone hack due to IE compatibility

allenhwkim · 2020-09-09T14:36:22Z

Thanks @aki77
@karol-f Just as a wish, it would be wonderful there is async feature like this, https://cli.vuejs.org/guide/build-targets.html#async-web-component

karol-f · 2020-09-09T14:38:26Z

Thanks @aki77
@karol-f Just as a wish, it would be wonderful there is async feature like this, https://cli.vuejs.org/guide/build-targets.html#async-web-component

Like this? https://karol-f.github.io/vue-custom-element/#/demos/lazy-loading

petomi · 2021-01-14T16:32:06Z

Is there a solution for the slots issue on Chrome that doesn't involve delaying component styles loading?

karol-f self-assigned this May 20, 2019

karol-f added the waiting for feedback from issue author label May 20, 2019

karol-f added Investigating and removed waiting for feedback from issue author labels Jun 18, 2019

supproduction mentioned this issue Jan 10, 2020

Slot doesn't work in the html #193

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

slots not correctly injected in Chrome and Opera #166

slots not correctly injected in Chrome and Opera #166

santo74 commented May 20, 2019

karol-f commented May 20, 2019

santo74 commented May 20, 2019

santo74 commented May 20, 2019

karol-f commented May 20, 2019

santo74 commented May 20, 2019

karol-f commented May 20, 2019

santo74 commented May 20, 2019

santo74 commented May 22, 2019

karol-f commented May 23, 2019

santo74 commented May 23, 2019

santo74 commented Jun 18, 2019

jstiers commented Mar 26, 2020

aki77 commented Mar 28, 2020

jstiers commented Mar 28, 2020

allenhwkim commented Sep 9, 2020 •

edited

allenhwkim commented Sep 9, 2020

aki77 commented Sep 9, 2020

allenhwkim commented Sep 9, 2020

karol-f commented Sep 9, 2020

petomi commented Jan 14, 2021

slots not correctly injected in Chrome and Opera #166

slots not correctly injected in Chrome and Opera #166

Comments

santo74 commented May 20, 2019

karol-f commented May 20, 2019

santo74 commented May 20, 2019

santo74 commented May 20, 2019

karol-f commented May 20, 2019

santo74 commented May 20, 2019

karol-f commented May 20, 2019

santo74 commented May 20, 2019

santo74 commented May 22, 2019

karol-f commented May 23, 2019

santo74 commented May 23, 2019

santo74 commented Jun 18, 2019

jstiers commented Mar 26, 2020

aki77 commented Mar 28, 2020

jstiers commented Mar 28, 2020

allenhwkim commented Sep 9, 2020 • edited

allenhwkim commented Sep 9, 2020

aki77 commented Sep 9, 2020

allenhwkim commented Sep 9, 2020

karol-f commented Sep 9, 2020

petomi commented Jan 14, 2021

allenhwkim commented Sep 9, 2020 •

edited