HTML spec does not allow self-closing tags on non-void elements.
HTML syntax rules [W3C]
Elements have a start tag to indicate where they begin. Non-void elements have an end tag to indicate where they end.
Start tags consist of the following parts, in exactly the following order:
- A "<" character.
- The element’s tag name.
- Optionally, one or more attributes, each of which must be preceded by one or more space characters.
- Optionally, one or more space characters.
- Optionally, a "/" character, which may be present only if the element is a void element.
- A ">" character.
There is a limited number of void elements in HTML5 spec. Here is the complete list:
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr.
What's really going on
The browser's parser has to listen to the spec. Since using the slash in a non-void element tag is invalid, the parser ignores the ending />, and <back /> means <back>. Therefore you are never closing the first element which prevents the others to work.
On Plunker you have:
<body>
<back></back>
Self closing <back />
Self closing <back />
</body>
which parses into
<body>
<back></back>
Self closing <back>
Self closing <back>
</back>
</back>
</body>
You then specify template: '<button>back</button>' on your directive which replaces back (and it's children) with the specified HTML resulting in:
<body>
<back>
<button>back</button>
</back>
Self closing <back>
<button>back</button>
</back>
</body>
What should I do then?
Use <back></back> for all and it will work fine. Alternatively you could use element attributes: <div back="attr"></div>.
See the following discussions for more details:
