Coding,  HTML,  Wordpress

A Beginners Guide To HTML Custom Elements

Regarded as web components, custom elements have allowed authors to define their own elements such as new APIs which can serve as handy options for creating readable markup. Plus, there are other interesting features which air the development of custom elements. I’m sure after hearing the noise about web components and the way they are affecting the web development domain, you’d definitely want to know more about these custom elements. This is exactly what I’ve looked into in this post.


What are elements?

Elements are basically the bits which end up into creation of web pages. Every web page comprises of two elements viz: the first one comes between <title> </title> tags and body elements while the second one comes between <body> </body> tags. Unlike the native elements, custom elements are the ones where we need to define the functionality, followed by naming the same in accordance to the type of work done by it.


And now, the steps which mark the creation and implementation of custom HTML elements

Step 1- Pass document.registerElement() as the name of your custom element

Here is the code you need to use for creating a new HTML element called x-HTMLcustom

var HTMLcustomElement = document.registerElement('x-HTMLcustom');
document.body.appendChild(new HTMLcustomElement());

With the above code, the following HTML would get added to the end of <body? Element:


Here, it is important to note that the dash(-) must be used within the name of the custom HTML element so that the browsers parser can differentiate between a standard and custom HTML element.

Step 2- Create a Javascript API for the custom HTML element

In order to define a Javascript API for the custom HTML element, you need to create a new Javascript object. For this, all you need to do is use the Object.create() method. Just pass HTMLcustom.prototype to it and you’ll be able to create a Javascript object which comprises of a standard set of properties and methods that can be used by different HTML elements. Here is how it looks like:

var HTMLcustomProto = Object.create(HTMLcustom.prototype);

After this, you can define the custom methods on this new javascript object as shown below:

HTMLcustomProto.welcome = function() {

Step 3- Call document.registerElement()

Once you’re done with defining the API for your custom HTML element, it’s time to call document.registerElement() function. Here, you need to use the custom element’s name as the first parameter, followed by passing in an object along with a property called prototype. Here, the value of the property must be set to the prototype object that has been created already. Here’s how it goes like:

var HTMLcustomElement = document.registerElement('HTMLcustom',  { 
    prototype: HTMLcustomProto

Step 4- Create a new instance of the custom HTML element

After having registered the custom HTML element, opt for creating a new instance for it which would later be added to the page. The markup associated with the same is shown below:

var HTMLcustom = new HTMLcustomElement();

Some insights on extending the functionality of existing HTML elements
Apart from creating your own set of custom HTML elements, you can also opt for extending the functionality of existing HTML elements using the registerElement() method.

Details about Custom Element Callback Methods

Well, there are different callbacks which can be attended to while creating and managing the custom HTML elements. Here is a list of callback methods that I’m referring to:

  • attachedCallback- This is called when a custom element has been inserted into DOM.
  • CreatedCallback- This is called when a custom HTML element has been created.
  • attributeChangedCallback– this is called when an attribute available on a custom HTML element is changed.
  • DetachedCallback- this is called when a particular custom HTML element is being removed from DOM.

A look at browser support for custom HTML elements

Currently, online Google Chrome(version 33+) and Opera are the only browsers which support the custom HTML elements. However, the Polymer project is working towards adding support for these custom elements to other browsers as well.


So now that you’re well familiar with the process of creating custom HTML elements, it’s time to gear up and use these custom elements for building absolutely stunning front-end web applications.

Sophia Phillips is currently working as a professionally qualified WordPress developer with WordPrax Ltd. - a leading WordPess development services and solutions company. She has been involved in writing excellent stuff on WordPress customization tips and tricks.

Leave a Reply

Your email address will not be published. Required fields are marked *