Web Standards – Why Should You Care?

Development of a software more often than not involves splitting up of modules so that work can happen in parallel and isolation within a team or otherwise. This is what web components enable – they help in creating reusable components with a web application. Kind of like distributed systems except the web components helps in componentizing within a single web page or document.

Web components are a work-in-progress W3C specification that all major browsers are keen to support and implement in themselves. With the launch of Windows 10 and Microsoft Edge browser – the Edge product team is committed to walk their part to help out web developers and make their life easy with regards to web components. With that thought in head here is what the Edge team is doing: Following is the sneak-peak into some of the elements that you can expect to see in future within Microsoft Edge:

1. Shadow DOM – the existence of shadow DOM is to provide functional encapsulation to sub trees of the main DOM tree. If one is providing functionalities such as: content, actions/logic within the content, share this content with different social media; Each social media interaction forms a different functionality, all of these can form different functional subtrees.  Kind of like divide and conquer (on the basis of functionality) and create a separate tree out of each division. Shadow DOM provides encapsulation to all these trees/sub trees by creating a shadow boundary between each of these sub trees and everything else. Due to encapsulations, your CSS will not run through all subtrees but retain itself within a shadow boundary.

2. Custom Elements - Custom elements help us define a new types of HTML tags or extend exiting HTML tags as per our wish or need. (feeling powerful, are we?) It enables the browser to attach this ‘developer’ defined element with their corresponding APIs. So the next thought is – are browsers ready? All I want to say is- Microsoft Edge will certainly be. Custom elements can be used as simply and easily as any standard HTML tags and just as we are work with

element we can work with custom elements.

    Create custom element: 

           var MyVar = document.registerElement('my-element', {

      prototype: )});

            Extend custom element:

           var MyVar = document.registerElement('my-element', {

       prototype: ,  extends: 'SomeVar'   });

3. Template Elements – this is where the Microsoft Edge development team started their rendezvous with the web component. Template elements are used in fragmenting the HTML element and kind of making a pseudo template out of it – which can be used only during runtime

Source : techgignews.com