Introduction
If you stay glued to the web industry, then probably you'll have heard about “Web Components” and how they will become the “Future of Web Development”. But in case you aren't aware of it, let's have an overview of web components first.
Web Components are collection of specs that helps developers to reuse elements across the web. They've been developed to bring a change to the way we create and consume our web apps. Web Components suite of specs include Shadow DOM, Custom Elements, and HTML Imports. However, the most talked about and transformative spec is Custom Elements.
This post will help you better understand the concept behind Custom Elements, and how to use them.
Understanding the Need For Custom Elements
While creating web apps using HTML, you may experience a lack of expression. While structuring an element in HTML, we are limited to using elements that HTML defines. Fortunately, we have elements such as <video> to display video, <img> for displaying images and lot of other elements that determine their own function. But as the web is rapidly growing, we have a lot of work to do than ever before. And thus, HTML standard can't always create elements that perform the same role and contain the same set of properties. This is where Custom Elements come in.
Custom Elements give developers flexibility to define a new type of HTML/DOM elements, and help to create new elements by extending some existing elements. And if the elements we've created are utilized by various users, then they could become a part of HTML standard elements.
Can We Start Building Custom Elements in HTML?
Probably by now, you'll be fantasized by the idea of creating custom elements. And certainly, you'll be eager to know whether you can start building those elements in HTML or not. Well, yes you can create custom elements by using the document.registerElement() method. You need to pass the method as the name of your custom element with an “(optional) object” to define your element prototype. For example, let's see how you can create a custom element of your choice, let's say, tree and add it to the end of the <body> element in your HTML document.
var MyCustomElement = document.registerElement('x-trees');
document.body.appendChild(new MyCustomElement());
And then, the following HTML element will be added to the end of the <body> tag in your HTML document:
<x-trees></x-trees>
Note: Make sure that your custom element contains a dash (-), so that the name of your custom element must contain a dash (-), as it helps browsers parser to distinguish custom HTML elements from the standard ones. This will help avoid conflict, in case a user introduces a custom element with the same name as yours.
Adding Custom Functionality to Custom Element
If you want to add custom functionality (a number of methods and properties) to your element, then you need to create an object by using the Object.create() method.
var MyCustomElement = document.registerElement('x-trees', {
prototype: Object.create(HTMLElement.prototype)
});
When the document.registerElement('x-trees') method is called, it will let the browser know about the new element, and then returns a constructor using which you can create new instance of your custom element – <x-trees>.
How to Extend Existing Elements?
As discussed previously, custom elements render the ability to create elements by extending native (or existing) elements. In order to make that happen, you will have to pass the element name along with its prototype (from which the element will be inherited) to the registerElement() method. But, before that, let's first understand the necessity to extend some existing element in HTML.
Let’s say you aren't too happy with the regular <img> element and want to extend it, so as to add new capabilities to it. For example, let's consider that you want to extend the <img> to display thumbnail images. For this purpose, you'll have to create a prototype object just as we did in the above section. However, here the only difference is that you'll inherit the prototype object of the element that you're extending. So, here your object will be HTMLImageElement.
var ThumbImage = Object.create(HTMLImageElement.prototype);
Next, several callback events are fired during the entire custom element lifecycle. For instance, createdCallback method is fired when you create a custom element. Here you can set your image width and height:
ThumbImage.createdCallback = function()
{
this.width = '80';
this.height = '80';
};
You can even choose to describe custom methods and properties of the element.
ThumbImage.changeImage = function()
{
this.src = 'custom-img.jpg';
};
Now, while extending a native element, you'll have to add the extends property to the (optional) object when a call to the document.registerElement() is made, as shown below:
var ThumbImage = document.registerElement('thumb-img', {
prototype: ThumbImage,
extends: 'img'
});
How to Extend Custom Elements?
Now, if we want to create an element (for instance, <x-trees-extended>) that extends the previously created custom element <x-trees>, then simply inherit the prototype of the custom element along with the tag from which you're inheriting the prototype:
var MyCustomElementProto = Object.create(HTMLElement.prototype);
…
var MyCustomElementExtended = document.registerElement('x-trees-extended', {
prototype: MyCustomElementProto,
extends: 'x-trees'
});
Using Web Components in Conjuction With Custom Elements
Custom Elements can work well with Web Components features. For example, you could incorporate markup in the <template> element, which will be parsed by the browser not until the custom element gets initiated.
<x-trees>
<template>…</template>
</x-trees>
You can encapsulate your internal code from the browser and hide it from the end-user using Shadow DOM. Besides this, you could even share your element across all the files and websites with HTML Imports.
Final Thoughts
You may be wondering whether it is okay to use Custom Elements today or not? The answer is yes, and no!
The concept of custom elements is not yet fully established as browser vendors are still working on implementing the registerElement() method. However, the latest verions of the browsers such as Chrome, Opera and Firefox Nightly have included the registerElement() method. Moreover, raw Custom Elements are not yet ready for production.
But, there's a viable alternative to using Custom Elements using a Polymer. It's a project set-up by the open community, in order to make it possible for users to bring future Web technologies to use, including Web Components such as Custom Elements. You can read more about this here.
About Me
Ben Wilson is wordpress programmer and writer. As a developer, he has done many projects on transforming websites to wordpress theme and many more. He used to write insights about wordpress.
Submit an article or tip
