An Introduction to HTML Custom Elements
W3C defines Custom Elements as web components that let authors define their own elements, including new presentation and API, that can be used in HTML documents. There are six main motivations which give air to this development i.e.
- Provide a way for Web developers to build their own, fully-featured DOM elements.
- Rationalize the platform.
- Make the easy readable markup.
- Bundle together custom functionality into a single tag.
- Making custom elements with proper functioning as per needs.
- Less generation of markup.
You’ve probably heard all the noise about Web Components and how they’re going to change Web development forever. If you haven’t, you’ve either been living under a rock, are reading this article by accident, or have a full, busy life that doesn’t leave you time to read about unstable and speculative Web technologies. Well, not me.
Peter Gaston
Before we move further, let us know about elements first. Elements are the bits that make up web pages, There are two elements on web page one as title elements, That happen to come between
<title> </title> tags and body elements, that happen to come between
<body> </body> tags.
Custom elements do the same work as native elements do, the only difference is that native elements have predefined functionality while as in custom elements we define the functionality and name it after the type of work it does. Example of some native elements like
<img> it does the work of rendering images on the browser, likewise
<video> tag renders videos on the web page.
Unfortunately in the modern world, we are developing the whole of web apps around
<div> but they don’t serve us the way we want sometimes and the energy we want to harness from them. In these situations, there comes handy we call custom elements.
If the elements we create become well established, they could become a fully standardized part of a future HTML specification. The things we make could define the future of the things we make.
How to Create Custom Elements
Before we register a new custom element, As per HTML specification new element registered which is not part of the specification is called custom tag, in many articles they write custom tags so don’t get confused with that.
If I will open my text editor and write <junaid> </junaid> and render it in the browser and will try to style it, and if I try to add javascript controls on this tag they will work smoothly, but it wouldn’t be good more than that a normal div.
While creating custom elements we should always put - between names of custom elements, for example, <my-element> and these are only valid custom names while elements without - are regular elements. This is the standard of distinguishing between regular and custom elements and allows the parser to distinguish between the same and also ensures forward compatibility when new tags are added to HTML. Custom elements, unregistered and unrecognized, use the HTMLUnknownElement interface, whereas registered and recognized custom tags use the HTMLElement interface. The beauty of HTML element is that we can add our own methods and properties, creating essentially a per-element API, Yes every custom element can have its own API.
The first step is to register the custom element using document.registerElement() in DOM, which can be accomplished by using javascript.
- var CustomElement = document.registerElement('custom-element', { prototype: Object.create(HTMLElement.prototype) });
A call to document.registerElement(‘custom-element’) teaches the browser about the new element and returns a constructor that you can use to create instances.
Custom elements allow us to extend existing (native) HTML elements as well as other custom elements. To extend an element, we need to pass registerElement() the name andprototype of the element to inherit from.
To create element A that extends element B, element A must inherit the prototype of element B.
If custom elements inherit from native elements, they are called type extension custom elements.
In short with custom elements, DOM shadow and
<template>, sitting back and realizing the markup is hot again.
If you want to get in more detail
Polymer project by Google is the right place to stop-by.