Closing tags in LitRenderer


I noticed that when I do this:

<vaadin-horizontal-layout theme="spacing-xs">
  <vaadin-icon id="queued-icon" icon="vaadin:lock" style="${item.queued}" theme="icon small"></vaadin-icon>
  <span id="name" class="name" style="${item.nameCrossedOff}">${}</span>
  <vaadin-icon id="replan-icon" icon="vaadin:arrow-forward" style="${item.replan}" theme="icon small"></vaadin-icon>

everything works fine.

But when I use non-container tags <vaadin-icon ... /> then things go horibly wrong.

In the browser I can see that the <span> and second <vaadin-icon> are contained in the first <vaadin-icon> 

Is this by design?  I've never noticed this before.

Custom elements require a closing tag.

Thanks @faithful-emu,
So basically it threads as . I assumed and were semantically the same. They are clearly not. Thanks for clearing that out.