Solvedwebcomponents Custom 'void' or self-closing elements (HTML parser changes)

This was discussed in #113

It would be very nice to be able to declare Custom Elements as void or self-closing. Given that element names are already a little lengthy (from the required dash) there are times where avoiding the name repetition would preferable.

Presently, all custom elements must be used as:


And I'd like to be able to do self-closing:

<my-element />

Or void:


Perhaps by a static getter in the class definition

customElements.define('my-element', class extends HTMLElement {
  static get isVoid() { return true }

Any chance we can reopen this discussion?

42 Answers

✔️Accepted Answer

#624 (comment)
... There's basically only interest in security fixes and non-normative changes.

#624 (comment)
So people are doomed to double their simple <custom-element></custom-element> names till the end of internet?

#624 (comment)
As far as the text/html format goes that's where we're at.

@annevk Sorry, but I simply cannot accept this.

This is a very real problem for those of us who write large web apps, and something that causes quite a bit of daily frustration, wasted time, and bloated code.

The ergonomics of a language matters, and saying we just have to live with it because you do not feel like ever evolving the language in any way, that's just plain unacceptable to me.

Please either provide a valid reason why <foo/>, which as I understand it is currently invalid, can't simply be interpreted as <foo></foo> - or reopen this issue so we can have some actual progress.

Other Answers:

I would definitely like to see self-closing tags, a good amount of tags I've found useful can be often described from their attributes e.g. <x-markdown src="./"></x-markdown> which would be a lot nicer as just <x-markdown src="./" />.

I don't care about custom void elements, but custom self closing elements would be incredible.


<fa-icon style="solid" type="cross" />

as a developer using custom elements I would really like self-closing custom elements. It makes no sense to me if I have a <custom-box color='RED' /> , that my browser even stops and ignores the remaining html code. I must specify a separate closing tag for the custom-box before it even works.

  • Developer friendly: allow self-closing custom elements for custom element users

Another motivation is; when someone is using the custom element and that element has no nested content or elements, that developer wants to cleanup its code by changing it to a self closing element. It just looks ugly.

Another motivation is; when the custom element needs a separate closing element, the developer might assume that the custom element accepts content; which it might not.

  • I would vote for the custom element IDE to issue a warning on ignored content for:
<custom-box color="RED">ignored text</custom-box>
<custom-box color="RED"><p>ignored child element with text</p></custom-box>

Could you, or someone else, please explain how adding support for self-closing elements, i.e. <foo/>, would actually introduce an XSS vulnerability? - preferably with an example.

Maybe I'm missing something, but I don't see a problem here - and I'm probably not alone :-)