vue-server-renderer: inheritAttrs false doesn't work properly

[ArtemyNv]

Version

2.6.11

Reproduction link

https://github.com/Tibon4ik/vue-server-renderer-inherit-attrs

Steps to reproduce

Clone the repo

• $ npm install
• $ npm run test

Or:

// Step 1: Create a Vue instance
const Vue = require("vue");

const AppCard = {
  template: `<div>appCardProp: {{ appCardProp }}</div>`,
  props: {
    appCardProp: {}
  }
}

const PlayerCard = {
  template: `<AppCard v-bind="$attrs" />`,
  components: { AppCard },
  inheritAttrs: false
}

const app = new Vue({
  template: `
  <div>
    <PlayerCard app-card-prop="appCardProp value" />
  </div>
  `,
  components: { PlayerCard }
});

// Step 2: Create a renderer
const renderer = require("vue-server-renderer").createRenderer();

// Step 3: Render the Vue instance to HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err;
  console.log(html);
  // <div data-server-rendered="true"><div app-card-prop="appCardProp value">appCardProp: appCardProp value</div></div>
  // Html attribute "app-card-prop" must be missing
});

What is expected?

<div data-server-rendered="true">
  <div>
    appCardProp: appCardProp value
  </div>
</div>

What is actually happening?

<div data-server-rendered="true">
  <div app-card-prop="appCardProp value">
    appCardProp: appCardProp value
  </div>
</div>

---

This bug happens when i use component with inheritAttrs: false, which use another component on top level of section or render function.

I want to pass props to inner component with v-bind="$attrs" and inheritAttrs: false. It passes props inside but still adds attributes to html element.

I noticed that this bug doesn't occur in next cases:

• if i set inheritAttrs: false on inner component (AppCard of code section).
• if top level of "template" or render function is not a component (e.g. simple "div" or "span").

Related: nuxt/nuxt#7195

[noreff]

If nobody don't mind I will try my best to solve it and push some PR later