Introduction:
If you have ever heard of the web and the components that make up the web, the elements that are going to bring about the change in the web technologies they are the ‘WEB COMPONENTS'. Web components are a combination of several connected technologies that make the elements reusable across the web.Until now the web was revolving around Shadow DOM but now the there is transformation to the whole new concept called ‘Custom Elements’ wherein a user can create, define his own elements and its properties as well as behavior.
What is this Custom Element all about?
Inspite of the existing HTML tags such as <img>,<pre>,<video> <select> ,HTML5 gives us an opportunity to create our own tags and just use them as any other tag in the web application and get the result we desire.
Then how to create these Custom Elements ?
When creating the custom elements we should make sure that we are not clashing with the existing or future HTML elements.
Then what is the solution?
Just define your custom element and put a hyphen somewhere in the name.
Example: <mypersonal-app> ........... </mypersonal-app>
Once the element is decided we need to register it on the DOM, by passing the element as an argument to the JavaScript method called as registerElement()
Example: document.registerElement(‘mypersonal-app’);
And now the DOM recognizes the newly defined custom element.
Custom elements are basically classified into two interfaces –
- HTMLUnknownElement
- HTMLElement
The former elements are those that are not registered and not recognized by the DOM
The latter elements are those that are registered and recognized by the DOM.
It is possible to add our own properties and methods to a HTMLElement. It means that every custom tag can have its own API.
To start up with this we need to initially define a new prototype and then add the properties and methods to it.
Let us start up with an example by creating a new method called as
fume()
var perProto=Object.create(HTMLElement.prototype);
perProto.fume=function() {
console.log(‘my first custom element’);
}
This method logs a message to the console.
In the next step we need to register the element, stating that it should use our newly defined prototype
document.registerElement(‘mypersonal-app’,{prototype:perProto});
Once this is done, you can query your element in the DOM and call the method.
var pers=document.querySelector(‘mypersonal-app’);
pers.fume();
Extending Existing elements to be used in this API:
A user can use the existing HTML elements and use it in this API.Like if I want to extend the <img> element, I can do it in this way-
document.registerElement(‘mypersonal-app’,{
prototype:perProto,
extends:’img’
});
The extends argument states that the custom element intends to use the img element
<img is=”mypersonal-app”>...</img>
Now DOM has to be informed that the img element wants to be extended, using the is attribute
Now this img element can have its own API.
Some more specialities of Custom Elements:
A set of callback events are fired throughout the life cycle of custom elements such as
- createdCallback: It is fired when an element is created
- attachedCallback: It is fired when an element is attached to the DOM
- detachedCallback: It is fired when an element is detached from the DOM
- attributeChangedCallback: It is fired when an element is changed
To run an anonymous function each time a new instance of custom tag is created in a page
perProto.createdCallback=function() {....};
Do custom elements work with other Web Components?
Custom elements have been completely designed to be interoperable with other features of the web components suite.
For example one can include : template element such as
<mypersonal-app>
<template>...</template>
</mypersonal-app>
One can be ensured that the entire internal code is hidden by using shadow DOM and sharing across multiple websites is possible using HTML imports statement
Which browsers support these custom elements:
The chrome (version 33+) and Opera have made its way in displaying the custom elements in more efficient way.
Conclusion:
Here in this article we have seen how our own custom elements can be created and then used on the web just like any other HTML elements.This custom elements carves a niche for itself for future
Web applications.With the use of shadow DOM and HTML it is going to make it’s way through the development of the front-end web development application in a great way.
So guys! Get yourself started to use them in your web applications and bring in a revolution in web development .
Other links:
