Self Closing Custom HTML Elements

I am working on a custom element plugin that allows Fontawesome 5 to be leveraged more easily in Aurelia apps. I have the plugin working well but I would like for the element itself it be self-closing when used.

If I try to include my element as a self closing tag then the next html node in the markup is removed. Are self-closing custom elements possible to create in Aurelia? If so what is the best way to achieve this.

Instead of this:

<fa-icon icon="spinner" spin ></fa-icon>

I would like to be able to do this:

<fa-icon icon="spinner" spin />

My first thoughts was “does the spec allow it?”
It is discussed here:

self-closing is not valid syntax in html5.

In html5,

<fa-icon icon="spinner" spin />

is treated as

<fa-icon icon="spinner" spin>

without proper closing tag!

self-closing is xml syntax, not html5 syntax.

Additional difference between html5 and xml, is that html5 has a list of tags do not need closing, like <input> and <br>. That’s why your <input /> and <br /> still work in html5, not because of self-closing, but because of ignoring self-closing!

As aurelia uses browser’s native html parser, what you want is not possible in Aurelia.

1 Like