parent data-... tag omitted for child components with falsy v-if on root elements

[7sempra]

Consider this child component:

<template>
<div v-if="showMe" class="child-root"></div>
</template>

And this parent component:

<template>
<div>
  <my-child class="make-it-red" />
</div>
</template>

<style scoped>
.make-it-red {
  background-color: red;
}
</style>

Assume the scope tags for these two components are data-v-0000000a and data-v-0000000b.

Normally, the child-root element should have BOTH scope tags. However, if showMe starts out false, then child-root is never given the parent scope tag (data-v-0000000a). It only gets data-v-0000000b, which means that make-it-red never applies to child-root.

Correct output (after showMe has been flipped to true):

<div data-v-0000000a>
  <div data-v-0000000a data-v-0000000b class="child-root make-it-red"></div>
</div>

Actual output:

<div data-v-0000000a>
  <div data-v-0000000b class="child-root make-it-red"></div>
</div>

[Akryum]

I got the same issue with the following use case:

<tabs>
  <tab>...</tab>
  <tab>...</tab>
</tabs>

<template>
  <div class="tab" v-if="isCurrentTab"><slot/></div>
</template>

I couldn't apply style to the <tab> elements in the scoped style.

[kazupon]

Close (fixed vuejs/vue#4774)