slots not correctly injected in Chrome and Opera
See original GitHub issueI 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?
Issue Analytics
- State:
- Created 4 years ago
- Reactions:3
- Comments:20 (5 by maintainers)
I have taken the following workarounds.
Wow, awesome to see this community active! Thank you @aki77 , I’ll try that coming week.