Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

See the minimal reproduction. As is, the class="red" attribute is not passed down to the component. Try removing "comment B" from the component, and it will work. Or, if you move it underneath/within the v-else, it will also work.

What is expected?

HTML comments in the template should have no affect on the underlying styles, behavior, CSS, JS, Vue, or anything.

What is actually happening?

An HTML comment, combined with v-if, is confusing vue's ability to automatically inherit attributes.

More info:

Error message

Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
 at <HelloWorld class="red">

App

<template>
  <HelloWorld class="red">Test</HelloWorld>
</template>

<script>
import HelloWorld from "./HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style>
.red {
  color: red;
}
</style>

Component

<template>
  <!-- comment A -->
  <span v-if="false">
    <slot />
  </span>

  <!-- comment B -->
  <div v-else>
    <slot />
  </div>
</template>

Putting a comment immediately under <template> also breaks the behavior of <Transition>.

MyComponent.vue

<template>
  <!-- Root comment -->
  <div>some content</div>
</template>

Usage

<Transition name="fade">
  <MyComponent v-if="visible" />
</Transition>

The transition enters correctly, but there is no transition on leave.