Version

3.1.1

Steps to reproduce

Run this code

const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')

const app = createSSRApp({
    template: `<test class="test--root" />`
})

app.component('test', {
    props: ['active'],
    template: `
        <transition name="fade">
            <div class="test" v-show="active">Test</div>
        </transition>    
    `
})

renderToString(app).then(html => {
    console.log(html);
})

What is expected?

Output is

<div class="test test--root" style="display:none;">Test</div>

What is actually happening?

Output is

<div class="test" style="display:none;">Test</div>

As a workaround, you can manually inherit the $attrs:

app.component('test', {
    props: ['active'],
    inheritAttrs: false,
    template: `
        <transition name="fade">
            <div v-bind="$attrs" class="test" v-show="active">Test</div>
        </transition>    
    `
})

KeepAlive also has the same problem. see https://github.com/vuejs/vue-next/blob/master/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts#L184

template-explorer