I was surprised to see that this worked perfectly.
So, why do we not use made-up elements like these since they work effectively.
But, even more important question here is : How and why does CSS work with fake elements?
Most browsers today, are designed such that they are already fast forward compatible with possible future additions to HTML to some degree. That is, unrecognized elements are beforehand parsed into the DOM.
But since, this work is still in its early stages of development, it should possibly be avoided until anything gets finalized.
Reasons for not using made-up elements :
HTML provides meaning to the data. The made up tags do not add any meaning to data. This is one of the many reasons why we don't use them. The other reasons are :
They do not conform to the HTML specification.
They might conflict with standard elements in the future if there comes any with the same name.