Multiple self-closing children causes nested children tree

While writing some tests for #33 I found that when using multiple self closing children in a parent it nests them.

In other words this:

<div>
  <div />
  <div />
</div>

Results in a nested tree like this:

<div>
  <div>
    <div></div>
  </div>
</div>

Another find, which is also in the tests, was that the whitelisted self-closing tags (such as <br>) instead causes an exception when written as a open tag, like <br></br>. Which might be correct, but the exception message (Error: multiple root elements must be wrapped in an enclosing tag) was a bit confusing.

[slaskis]

Very interesting @rbiggs! I haven’t actually read the spec and was just going by intuition 😉

I do read that spec slightly different though. Regarding start tags it may have one or more space characters unless there are attributes.

And it does only mention self-closing tags for void elements, for which it’s optional and “has no effect”, and foreign elements (such as svg), for which it is required unless there is an end tag.

As for the normal tags my intuition says that html5 is pretty chill. But you’re absolutely right that the validator complains, and it gives me this message:

Self-closing syntax (/>) used on a non-void HTML element. Ignoring the slash and treating as a start tag.

However, the way I’ve seen this package is less stringified html and more like a “no need to preprocess jsx”. And since jsx treats self-closing tags the same as closed tag without children I expected this to work here as well.

[rbiggs]

Just so you know, self-closing tags should always have at least one space character between the tag name and the U+002F (“/”) character. Not including a space should result in an error according to the specs from W3C. Same for <img />. See documentation on HTML 5 closing tags. Standard self-closing tags are:

• br
• hr
• img
• input
• meta

These are never closed, you can use the forward slash / to close them or not.

By the way, <div /> is not a self-closing tag and should throw an error. Problem is jQuery does accept this, going against W3C docs. They have examples on their site of using this bad syntax, encouraging junior developers to using this broken HTML syntax: var div = $('<div/>')

Creates a correct div element, although it is incorrect HTML5.