An exciting feature I came across recently, which is kind of cool really, is creating your own HTML elements. To be honest, this is only useful or beneficial to those developers who love DIY things, or those that really believe in semantics.
However, generally speaking – semantics is good! Naming conventions exist because it is actually easier to read, to follow, to understand. Imagine how hard it would be for a new programmer to understand code written by the previous programmer if the naming convention followed was completely random and made no logical sense at all?
Creating custom HTML elements helps to take naming conventions and semantics to a whole new level. For example, if you’re making a blog, you could actually have a tree as follows:
<blog-container> <blog-title>Sample</blog-title> <blog-date>01/02/1994</blog-date> <blog-body>Random Text</blog-body> </blog-container>
Looks cool right?
This is how we do it:
document.registerElement() method is used to create a custom HTML element. This should be passed as the name of your custom element along with an (optional) object that defines the API.
var blogContainer = document.registerElement('blog-container');
And that is actually it! I hope you found it useful.