Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistent Warning For Named Slot in "is" Components #10168

Closed
pxwee5 opened this issue Jun 19, 2019 · 7 comments
Closed

Inconsistent Warning For Named Slot in "is" Components #10168

pxwee5 opened this issue Jun 19, 2019 · 7 comments

Comments

@pxwee5
Copy link

pxwee5 commented Jun 19, 2019

Version

2.6.10

Reproduction link

https://codepen.io/jameswee/pen/gNwZxJ?editors=1010

Steps to reproduce

In the pen provided above, you can't see the warning because there's no build step.

However if you put this through Webpack you'll see this error
<template v-slot> can only appear at the root level inside the receiving the component

What is expected?

You will see <template v-slot> can only appear at the root level inside the receiving the component

What is actually happening?

I'm seeking explanation here as well. LOL


Additional Comments

There's an inconsistency in the old and new slot syntax.

The new syntax caused warning when used with the special is attribute.
Both the HTML below are server rendered by a CMS and is compiled by Vue compiler.

<table>
  <tr is="my-tr">
    <template v-slot:default>
      <td>Test</td>
    </template>

    <template v-slot:named>
      <td>Test</td>
    </template>
  </tr>
</table>

Error message:

<template v-slot> can only appear at the root level inside the receiving the component

217|  <table>
218|    <tbody><tr is="my-tr">
219|      <template v-slot:default="">
   |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
220|        <td>Test</td>
   |  ^^^^^^^^^^^^^^^^^^^
221|      </template>
   |  ^^^^^^^^^^^^^^^

The old syntax works without error. 👍

<table>
  <tr is="my-tr">
    <template slot="default">
      <td>Test</td>
    </template>

    <template slot="named">
      <td>Test</td>
    </template>
  </tr>
</table>

Can we treat is attributed DOM element as vue components like how the old slot syntax works?

I'd like to point out that the default slot works without errors. But ideally we should be able to use named slots here as well.

<table>
  <tr is="my-tr">
    <td>Test</td>
  </tr>
</table>
@pxwee5 pxwee5 changed the title Inconsistent Warning For Named Slot Under "is" Components Inconsistent Warning For Named Slot in "is" Components Jun 19, 2019
@LinusBorg
Copy link
Member

use vue.js instead of vue.min.js

The minified version is meant for production and doesn't contain warnings. This is documented.

@zrh122
Copy link
Contributor

zrh122 commented Jun 19, 2019

@LinusBorg , this may be same as issues #10152.

@pxwee5
Copy link
Author

pxwee5 commented Jun 19, 2019

@LinusBorg Thanks for pointing that out. But that isn't the fix.

Thanks for pointing to the related issue @zrh122 that's exactly what I'm dealing with.

@LinusBorg
Copy link
Member

Oh, I see. I thought the issue was about the error message not appearing in the codepen. Thanks for the correction.

In that case: closed as duplicte of #10152

@LinusBorg LinusBorg reopened this Jun 19, 2019
@LinusBorg
Copy link
Member

Oh, I see. I thought the issue was about the error message not appearing in the codepen. Thanks for the correction.

In that case: closed as duplicte of #10152

@luckydonald
Copy link

Using <template slot="named"> instead of <template v-slot:named> fixes the issue.
Thanks.

@HyperCC
Copy link

HyperCC commented Dec 13, 2022

you should use <b-table> instead of <table> to use <template #cell(option)="data"> inside. This works 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants