Cannot access slots in child component's dynamic function in vue2

Question

I am passing <slot name="success-mark"> to child component as below.

<vue-dropzone ref="myVueDropzone"
  id="dropzone"
  :options="dropzoneOptions">
  <slot name="success-mark"><i class="fa fa-trash"></i></slot>
</vue-dropzone>

and my child component has following function which returns the template which consist above provided slot.

setPreviewTemplate(){
  return `
            <div class="dz-preview dz-file-preview">
                <div slot="image" class="dz-image" style="width: ${this.options.thumbnailWidth}px;height: ${this.options.thumbnailHeight}px">
                <img slot="thumbnail" data-dz-thumbnail /></div>
                <div slot="details" class="dz-details">
                    <div slot="size" class="dz-size"><span data-dz-size></span></div>
                    <div slot="name" class="dz-filename"><span data-dz-name></span></div>
                </div>
                <div slot="progress" class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                <div slot="error-message" class="dz-error-message"><span data-dz-errormessage></span></div>
                <div class="dz-success-mark" slot="success-mark"><i class="fa fa-check"></i></div>
                <div slot="error-mark" class="dz-error-mark"></div>
            </div>
        `;
}

I tried multiple ways to change slot - success-mark but no luck.

Expected Behaviour

Child component should show fa fa-trash i.e. trash icon.

Actual Behaviour

Child component doesn't change the slot success-mark to fa fa-trash it remains to default fa fa-check i.e. check icon.

Where is the mess?

Answer 1

Changing the child template to

<slot name="success-mark"></slot><i class="fa fa-trash"></i>

should allow fa-trash to show (at least with non-dynamic template, it works)

Out of curiosity, could you please show how you're using the result of setPreviewTemplate()? If I understand correctly, this is a child filling it's own slot (not parent providing slot content). Or is 'and my child component has following function' a typo, you meant to say 'and my parent component...'?

Edit #1

After perusing the source vue-dropzone, one idea springs to mind (but may not be how you want to handle it) - add the icon to dropzoneOptions.

setPreviewTemplate(){
  return `
    <div class="dz-preview dz-file-preview">
       ...
       <div class="dz-success-mark" slot="success-mark">
         <i class="fa" :class="this.options.icon"></i>
       </div>
       ...
}

Edit #2

Forgive me if I've completely misunderstood, but it looks like you have the syntax the wrong way round.
The <slot> should be on the child, so I'd expect to see it in the value returned from setPreviewTemplate().
The parent provides some content which should have the slot attribute, so maybe

<vue-dropzone ref="myVueDropzone"
  id="dropzone"
  :options="dropzoneOptions">
  <i class="fa fa-trash" slot="success-mark"></i>
</vue-dropzone>

and

setPreviewTemplate(){
  return `
    <div class="dz-preview dz-file-preview">
       ...
       <slot name="success-mark"><i class="fa fa-check"></i></slot>
       ...
}