lang="" on a html tag produces "VueCompilerError: Invalid end tag."

[xPaw]

Version

16.0.0-rc.0

Reproduction link

https://github.com/xPaw/vue-loader-lang-bug

Steps to reproduce

Clone my repro project, yarn and yarn webpack.

Template:

<template>
	<div lang="">
		<div></div>
	</div>
</template>

What is expected?

Compilation succeeds

What is actually happening?

ERROR in ./src/test.vue
Module Error (from ./node_modules/vue-loader/dist/index.js):

VueCompilerError: Invalid end tag.
at src\test.vue:4:2
2  |    <div lang="">
3  |            <div></div>
4  |    </div>
   |      ^
5  |  </template>

 @ ./src/index.js 1:0-21

Removing lang="" attribute fixes this.

---

vuejs/vue-loader#1726 was closed as not being able to repro, but it still won't compile.

[haoqunjiang]

Sorry for closing the other issue too soon. As the original reproduction was too big, I tried to reproduce with a hello-world project. When I tried div lang="" on that project, it worked.

It is because I missed a critical part of the bug - besides the lang="" attribute, the content of the element needs contain a closing tag like </div> causing the parser to clear the stack too early.

[haoqunjiang]

It's a bug in @vue/compiler-sfc.

https://github.com/vuejs/vue-next/blob/43579a8de358846de96d0d789eebbebf95b2f391/packages/compiler-sfc/src/parse.ts#L114-L121

[xPaw]

Right, makes sense that is in the compiler, I didn't know where exactly the bug was, because the vue ast thing worked fine.

[haoqunjiang]

A temporary workaround: use :lang="''", because the SFC parser only checks for the static lang attribute, so a dynamic one can circumvent this check.

[asoglovo]

For a case like this where you add attributes to native elements, wouldn't the data-* html attributes be a better fit?

[xPaw]

lang is a HTML attribute. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

[asoglovo]

Oh, didn't know that :) Thanks for the clarification