15

<self-closing /> tag are not allowed in HTML custom element.

Why is that?

Many cases just need void tag, I guess by that, code would be more readable. On the other hand, it implies semantic meaning more directly.

Just like <hr />, which by code itself means there shouldn't be any children inside it, because there's no place for that. Plus it has nothing to do with children.

Custom elements cannot be self-closing because HTML only allows a few elements to be self-closing. (read more)

Mehdi Raash
  • 8,721
  • 2
  • 29
  • 42

1 Answers1

13

The browser has to special case void elements so it knows to close them immediately without looking for an end tag.

No custom element will be in a browser's internal list of void elements.

Remember, the significant thing that indicates an element is void is the tag name. The optional / is just syntactic sugar for people and syntax highlighters that are still trying to think in terms of XML. It's meaningless to an HTML parser.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Okay so for sure the browser interpret closing-tag a bit differently, But what's the problem if there was a closing-tag inside the internal list of void elements(for custom elements)? Are you saying this is because of performance sake and XML standardization?. – Mehdi Raash Jul 31 '17 at 14:45
  • It has nothing to do with performance. It has more to do with a lack of XML standardization. Browsers don't recognize XML-style self-closing tags in HTML. Void elements are predefined elements. That list can't be changed (it wouldn't be backwards compatible). Changes to the HTML parsing rules wouldn't work either (also not backwards compatible). – Quentin Jul 31 '17 at 14:49