no-invalid-template-root fails on self-closing root

[privatenumber]

My root element is a self-closing textarea element and I get the error:
The template root requires an element rather than texts vue/no-invalid-template-root

[mysticatea]

Thank you for this report.

Could you tell us detail information?

• eslint verison
• eslint-plugin-vue version
• Your configuration
• Repro code

---

I'm guessing your situation is https://jsfiddle.net/3pv889zu/

@yyx990803 Vue.js supports self-closing in this case?

[mysticatea]

I got it: https://jsfiddle.net/du2ng274/1/

[michalsnik]

Btw @hirokiosame self-closing textarea is not a valid HTML5 tag and you should use proper <textarea></textarea> instead anyway.

[privatenumber]

@michalsnik Ah, thanks for mentioning that. I had created a custom textarea component where the root of that component was simply a textarea (not self-closing). However, the usage of the custom-component was self-closing.

[michalsnik]

What's the status of this @mysticatea? Is the lack of new parser blocking us from fixing this?

[mysticatea]

@michalsnik Yes.

1. The content of <textarea>s is RCDATA, so the parser ignores all tags except </textarea> end tag. And HTML ignores self-closing, so all after <textarea/> become just text.
2. In conversion process from HTML AST to Vue.js template AST, it moves the content of elements which end with /> to the next sibling of the element.

For example:

// source code
<template>
    <textarea/>
</template>

// HTML AST
<template> element
┣ "\n    " text node
┗ <textarea> element
　  ┗ "\n</template>" text node

// Vue.js template AST of this plugin
<template> element
┣ "\n    " text node
┣ <textarea> element
┗ "\n</template>" text node    // ← this text node causes `no-invalid-template-root` error!

I'm working on this with new parser.

[mysticatea]

This bug exists only on the following elements which have the self-closing sign:

• <title/>
• <textarea/>
• <style/>
• <xmp/>
• <iframe/>
• <noembed/>
• <noframes/>
• <script/>
• <noscript/>

Practically, I think only <textarea/> and <iframe/>.

[michalsnik]

Alright @mysticatea, that all makes sense, thanks for explanation 👍 And what's the current state of the parser you're working on? No rush, I'm just trying to estimate possible date for the official release of this plugin. This and the other bug #56 are our blockers and both will be solved with the new parser.