Self-closing Directives not always rendering

[CaryLandholt]

I have noticed that self-closing directives do not always render.
It appears that a directive following a self-closing directive in the same hierarchy does not render.

Here is a Fiddle demonstrating the scenario. http://jsfiddle.net/carylandholt/s8BAb/

[mhevery]

HTML spec does not allow self closing tags.

[CaryLandholt]

Can you clarify what you mean by HTML spec as it relates to directives? Do you simply mean that Angular does not support it?

The following are self-closing:
img src="foo/bar"
link rel="stylesheet" type="text/css" href="theme.css"
meta http-equiv="X-UA-Compatible" content="IE=9"

[mhevery]

in HTML there is no such thing as a self closing tag. There are only tags which are leafs. Leaf tags are fixed.

and is equivalent. the HTML parser ignores the ending /

[CaryLandholt]

Thanks Miško for the follow-up!

[Tharaxis]

By that argument all element tags are abhorrent because they are not the specced out list of valid elements (yes, I know HTML5 relaxes these rules). Perhaps there could be a reason as to why not make AngularJS support this to allow for a slightly more terse and easier to read markup for elements that do not care about their inner content (I would argue this is the LARGE majority of Angular element directives). For large templates and blocks of code, the mandate that they have to include separate closing tags means the HTML itself just looks that little bit more messy as a result.

[caitp]

@Tharaxis the thing is, it's not Angular which decides whether or not something is a "self-closing"/child-free tag, it's the browser's parser (which, for good reason, has to listen to the spec).

I think you might be able to get around this (for a while, anyway) using XHTML doctypes, and XHTML self-closing tags, but I don't have the experience to verify that this would work for sure.

HTML5/the WHATWG theoretically offers a lot of allowances for conditional "void" tags, (like deeming that nested <li> tags are not actually nested, but are void), but there's no real mechanism to define your own leaf tags, and no guarantee that even these special conditional void rules are actually implemented correctly despite being around for something like 5 years.

---

I got a bit side tracked there, but yeah, it's the browser doing this, not Angular parsing the entire document as though it were just text.

[CaryLandholt]

@Tharaxis, yep, @caitp is right. It's the browser's parser.

For custom elements you'll just have to live with it.
After using Angular for a year plus, it's actually not been a big deal.