How To: Create Custom HTML Element

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:

The 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.

Example:
var blogContainer = document.registerElement('blog-container');

And that is actually it! I hope you found it useful.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: