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:
https://github.com/w3c/webcomponents/issues/624#issuecomment-370310607
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