Vue: Component rendered outside parent element.

[rebz]

Version

2.3.3

Reproduction link

https://jsfiddle.net/puwcs9ay/6/

Steps to reproduce

Create a table row component, called <item-row> and use the v-for directive to iterate over some data and generate a couple table rows; well, some <tbody>s.

What is expected?

The <item-row> component should be rendered inside the <table> element.

What is actually happening?

The <item-row> component is being rendered outside and above the <table> element.

---

I am currently using this technique (tbody instead of tr for table rows) on a live project that works perfectly fine. However, I ran into this bug attempting to help a user with another issue: https://github.com/vuejs/vue/issues/5674#issuecomment-301572246

[posva]

It's not a bug, the browser is moving the element outside of the table before Vue get to replace it 🙂

[rafi16d]

I already have this issue today, according to the docs you need to use the is special attribute:

<tbody is="item-row" v-for="(row, index) in rows"></tbody>

The custom component will be hoisted out as invalid content, thus causing errors in the eventual rendered output.

Corrected Fiddle: https://jsfiddle.net/rafi16d/puwcs9ay/7/