What problem does this feature solve?

There are such recommended examples in the official website documentation:

<!-- SFC、template、JSX -->
<MyComponent/>

<!-- 在 DOM template -->
<my-component></my-component>

I think it has something to do with HTML parse and vue template parse order, React also supports the use of self-closing tags in dom templates, I think it can be supported in theory. I wonder why vue has not been supported. Is there any problem hindering it?

What does the proposed API look like?

<!-- SFC、template、JSX and DOM template -->
<MyComponent/>
or
<my-component></my-component>

React also supports the use of self-closing tags in dom templates

To the best of my knowledge, React doesn't support any kind of templates (only JSX), so I don'T know what you refer to here.

Try adding a self-closing tag to an HTML document and open it in a browser, then check devtools. it will be turned into a normal one by the browser. Why? Because according to HTML5 spec, you can't have such self-closing elements - browsers just choose to generously adjust your wrong HTML for you.

However it still works:

https://jsfiddle.net/Linusborg/o6wfpyv0/1/

So there is nothing we can "add" here. We will keep our recommendation of writing your DOM templates in a way that is compliant to the spec where possible.

Hello LinusBorg, I understand that vue sfc needs to be compiled by vue and then mounted on html, so why not closed tag first during the Vue compile process? In this way, the DOM structure obtained by the html parser is itself closed.

I am a Vue beginner, I am more interested in this piece, thank you

React also supports the use of self-closing tags in dom templates.

I'm referring to this way of writing React's outermost component：

ReactDOM.render(<Hello />, document.querySelector("#app"));

this is normal.

But writing this on the outermost component of vue may cause some problems due to closing tags, because this closing process is carried out in html parse.

<div class="app">
    <test-component />
    <div class="test">
               <p>test</p>
    </div>
 </div>

So I think that before the outermost component of vue is mounted on the app node, can the component tags inside be closed first, instead of handing over to the html parser to do this.

You seem to misunderstand the documentation. You can use self-closing tags in SFCs templates. You posted the example yourself.

You should not use them when defining the template directly in the DOM (with a native template element (as opposed to in an SFC or string), because that's not guaranteed to be supported by browsers.

edit: re-reading your last comment, I must say I have no idea what you are trying to say. React uses JSX, not DOM templates. Those two are very differnt things. JSX never touches the browser (like SFCs, JSX needs to be compiled beforehand).

I misunderstood, thanks a lot.