Self-closing component tags (<my-comp/> instead of <my-comp></my-comp>)?

🚀 feature request

Relevant Package

This feature request is for @angular/compiler? Unsure.

Description

The issue title pretty much covers it but here is another example:

<super-duper-long-component-name [prop]="someVar" />
<!-- instead of -->
<super-duper-long-component-name [prop]="someVar"></super-duper-long-component-name>

There is an existing issue for this, #673, but it was closed due to inactivity.

That issue got half-rejected (it was not resolved) on the basis of the HTML spec, which does not allow self-closing tags. That makes a total of zero sense to me. The HTML template language is already far beyond what vanilla HTML offers, and that is the entire point of using a framework like Angular. Many other major frameworks (React/Vue/Svelte to name a few) already support self-closing component tags.

I understand that Angular templates were being parsed in the browser before, but why should ease-of-life syntax sugar be banned when using AOT compilation? Sure, some people still use JIT-compiled Angular, but then again, some people still use Internet Explorer in 2020. If they want to suffer so be it but why refuse to add excellent features for the rest of us? There are plenty of antifeatures out there but I personally think self-closing tags are pretty intuitive and improve the code quality significantly; from the looks of #673 it seems like a lot of other people agree.

Please reconsider self-closing component tags.

Describe alternatives you’ve considered

Continue to sigh as I write needlessly verbose code and write checks for two different nullish types.

[lazarljubenovic]

Another thing.

Many other major frameworks (React/Vue/Svelte to name a few) already support self-closing component tags.

Please reconsider self-closing component tags.

This is because in these frameworks, a component is defined by a tag name and there’s a clear one-to-one mapping. In Angular, a component has a selector. The template compiler goes through the template and does a check for each present element to see if it matches with a selector of any component included in the module where the component whose template is being checked is declared. You can have a component with a selector div#id.class[random-attr].

In Angular, you don’t “create a component with a tag my-cmp”. You create a component with a selector “my-cmp”, and when a template contains an element which matches it (which happens to be a custom element since there’s no my-cmp in HTML5), the template of the matched component gets splashed inside (obviously there’s more going on in this step but this suffices for this discussion). So the issue with “allow this for components” is that you don’t know if it’s a component before it ends up being a component – at which point, your template already has to be valid, and therefore the tag must be closed (because a custom element’s tag must be closed).

React doesn’t even have a concept of tags. You’re probably thinking of JSX, which is just syntax sugar for calling functions with a special signature. Instead of doing h('x', { foo: 'bar', children: [h('y')] }), you can write <x foo="bar"><y/></x>. When the second parameter doesn’t have a children prop, you can self-close the tag. That’s all. There’s no HTML there, it’s just a tiny transpiler on top of ES/TS which allows you to fool yourself into believing you’re writing HTML (and then you get weird habits of doing <input/> which should really be <input> since it’s a void tag and not self-closing tag).

[spock123]

Duplicate of #673

I think @samterainsights already mentioned that he wanted to bring it to attention again (given the old issue has been closed for a long time).

The issue is that many developers don’t understand the need to adhere to strict html5, when all other frameworks value developer experience higher. There should be no technical issue in supporting it, so I’m not sure I fully understand the religious adherence to html5 specs.

Maybe someone smarter than me can explain the value of strictly following html5 specs, when it apparently is not an issue for vue, react, svelte and what not. Cheers