Vue: Error compiling template, even though one root element

Created on 20 Jul 2017  ·  4Comments  ·  Source: vuejs/vue

Version

2.4.1

Reproduction link

https://jsfiddle.net/k5h2fvqh/

Steps to reproduce

  1. <p> tag as Root element
  2. put <div> tag as child element

What is expected?

Render template correctly

What is actually happening?

Error compiling template with message "Component template should contain exactly one root element"

bug

Most helpful comment

That is exected behaviour, <p> tag can not have child <div> (and other blocks too) so <p><div></div></p> is parsed as <p></p><div></div></p> and as you can see it's more than one root element. That's HTML limitations.

P.S. More information available here

All 4 comments

Here's minimal repro: https://jsfiddle.net/gq2ckLLf/

That is exected behaviour, <p> tag can not have child <div> (and other blocks too) so <p><div></div></p> is parsed as <p></p><div></div></p> and as you can see it's more than one root element. That's HTML limitations.

P.S. More information available here

Complete list of elements that "close" <p> is available here

Was this page helpful?
0 / 5 - 0 ratings