Web Components, the Next Generation Web Development Markup

A lot of progress has been made since the introduction of the Web Components back in 2011. Basically Web Components are the sets of several separate technologies. You can think of Web Components as reusable UI (User Interface) widgets that are created using open Web technology. They are part of the browser, and so they do not need external libraries like jQuery, mootools and Dojo. Web Components is new and still-developing

There are bunch of polyfills to fulfill the compatibility issue of browser with web components as we know that Web Components are under-developing. So we can use Polymerwebcomponent.js, X-Tags and Bosonic. We are not discussing about these great tool here. I recommend you should see them by yourself.

Why Use Web Components

Web Components give developers an easier way to create Web/Mobile sites and recyclable widgets on these sites with the help of the HTML, CSS and JavaScript they already know. So that mean you don’t have to learn a new language for using Web Components

Four Powerfull tools of Web Components

1.  Shadow DOM

Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree. Consider a simple slider:

Put this code into any browser, and see the magic:

Shadow DOM is sounds like nice feature and it is. Basically in web documents, there is only one DOM. Think about DOM hosting DOM, which hosts more DOM. You’ll see something like this in Chrome inspector (note #shadow-root, which is completely encapsulated DOM)

2.  Templates

Insert bunch of clone-able Markups. Can be activated for later use

3.  Custom Elements

Create new HTML elements-expand HTML’s existing vocabulary. With the Custom Element we can define our own element. This can be anything, But your elements must have a dash/hyphen, to avoid any naming clashes.

4.  HTML Imports

Import the chunk of HTML code with import tag. Importing files into our pages comes in many shapes. For CSS, we have @import, for JavaScript in ES6 modules we have import {Module} from ‘./PATH’;, and finally, HTML. We can import HTML components at the top of our document to define which ones we need to use in our app

You can find out more about Web components here. webcomponent.org

Written by 

Rachel Jones is a Solutions Lead at Knoldus Inc. having more than 22 years of experience. Rachel likes to delve deeper into the field of AI(Artificial Intelligence) and deep learning. She loves challenges and motivating people, also loves to read novels by Dan Brown. Rachel has problem solving, management and leadership skills moreover, she is familiar with programming languages such as Java, Scala, C++ & Html.

3 thoughts on “Web Components, the Next Generation Web Development Markup

Leave a Reply

%d bloggers like this: