lang="" on a html tag breaks compilation in v16

[xPaw]

Version

16.0.0-beta.7

vue@3.0.0

Reproduction link

https://github.com/thelounge/thelounge/blob/d7aaf91f31a6c7bbb714f0bfe5e701f718b9e19c/client/components/Chat.vue#L2

Steps to reproduce

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

VueCompilerError: Invalid end tag.
at D:\GitHub\thelounge\client\components\Chat.vue:4:2
2  |    <div lang="">
3  |            <div></div>
4  |    </div>
   |   ^
5  |  </template>

What is expected?

Compiles fine.

What is actually happening?

We have a lang="" on a div tag (which is valid according to html spec) and it produces VueCompilerError: Invalid end tag. on multiple closing tags, and removing or renaming lang attribute makes it work fine.

---

I tried to repro in jsfiddle and in vue compiler explorer, both of these worked, so I am assuming the issue lies in vue-loader.

I am guessing its trying to parse lang attribute as if it was on root template or script.

[MarcoVdE]

Agreed that it should not break, but it should give a warning, according to the Mozilla developer docs:

The default value of lang is unknown, therefore it is recommended to always specify this attribute with the appropriate value.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

[xPaw]

We specify lang="" on the chat contents, because we simply can't know what language the messages will be in (or they can be mixed even).

[MarcoVdE]

If you don't know the language of the content, don't give the attribute defining the language, it's not a required tag.

[xPaw]

It sort of is because we also have a lang=en on html, so we set it to unknown on the chat element to unset it.

That's besides the point, vue (loader?) should not break on it, as it worked before.

[MarcoVdE]

Just backing up your point for unsetting it:

3.2.6.2 The lang and xml:lang attributes
The lang attribute (in no namespace) specifies the primary language for the element's contents and for any of the element's attributes that contain text. Its value must be a valid BCP 47 language tag, or the empty string. Setting the attribute to the empty string indicates that the primary language is unknown. [BCP47]https://html.spec.whatwg.org/multipage/references.html#refsBCP47

And yes, it shouldn't break it, it should just give an optional warning that should default to true in regards to it.

The reason I am adding this info is that there is always a good argument to make to have warnings for things that are bad practice, so when fixing where it's breaking, handle it to throw a warning based on the config toggle (though it should rather be part of your linter then).

[xPaw]

Why a warning? It is a valid, as your own link to the spec indicates. Nor is it loader's job to validate html attributes.

[haoqunjiang]

I'm no longer able to reproduce this issue in a fresh project with the latest version. So I presume this has been resolved.

If you still encounter similar problems, please open a new issue with a reference to this one and a minimal reproduction.

[xPaw]

I still can't build my project using vue-loader@16.0.0-rc.0. The repro example in inital issue still applies.