This document introduces web components as a new W3C standard that will provide first-class support for features currently implemented by JavaScript frameworks like templating, scoping, and routing. Web components use shadow DOM for scoping, templates for reusable components, custom elements to extend HTML tags, and HTML imports to reuse documents. This standard aims to make redundant work done by frameworks and allow cross-application component reuse directly in browsers.

1. Introduction to “Web
Components”
Narendran Solai Sridharan

2. HTML and Web Development
It gave rise to sharing Ideas &
documents across Universities and
eventually for all.

3. Interactive HTML
Opened Business on Internet across
World Wide Web.

4. AJAX, Dynamic HTML and
JavaScript
Made HTML Document More
Interactive and Less Expensive

5. Non Destructive Java Scripting
and Jquery
Made Manipulation of HTML DOM easy
and to work without any flaws during
DOM Load with “Cross Browser
Support” for various Browsers.

6. Jquery Toolkits, DoJo Toolkit,
YUI Toolkit, GWT Toolkit, EXT JS
The Raise of Toolkits with built in
reusable Widgets increased productivity
of “Web Application” Development for
all browsers

7. Responsive HTML & Bootstrap
Raise of Mobile phones let to the
development of Responsive HTML &
Bootstrap CSS & JS Framework.

8. SPA, REST API, JSON & JS Frameworks
(Prototype, Ext, Angular, Backbone,
Ember, React, Knockout)
Single Page Applications (SPA), JavaScript Frameworks reconsidered
development of Web Application in a maintainable way. They Introduced,
1. Templating
2. Two Way Binding
3. Routing for AJAX calls & History Management
4. MVC Support - Modularity with Componentization.
5. Dependency Injection
6. Scoping of properties & behaviors of Components

9. HTML 5 Standard
HTML 5 Standard New Tags,
1. Considered Common structure of Business Application,
most common UI Elemental Structures
2. Considered Mobile Platform, Offline Storage, Geo
Location Detection and Advanced Multimedia

10. What is NEXT?
Despite Web Application Developers remain
Happy stating “Enough is Enough”.
We have Too MUCH of same principles
present in different JS Frameworks.

11. Problems are wonderful
opportunities for Innovation
HTML 5 tried addressing few frequently
used and redundant work.
Now Again there is a redundancy
depicted by various JS Frameworks

12. Web Components
• It is a W3C Standard similar to HTML 5
• It will be implemented by All Browsers sooner or later
• Few principles followed in various JS Frameworks like Scoping,
Routing, Templating will be provided with First Class Support in the
Browser itself.
• It will help to reuse components Across Applications rather than
reusing components only within one Application.

13. Web Components – Shadow
DOM
1. A First Class Support for Scoping.
2. Now only one DOM is in one HTML, With Web
Components we can have one Parent DOM and many
DOM modules/Shadow DOMs each having their own
Scope
3. It is essential for Templating & Custom Tag Creation

14. Web Components – Templates
1. Supports Templates or Widget Creation,
which can be reused.
2. If same Template is used in 2 different
Application, Browser will reuse it without
loading it for each Application.

15. Web Components – Custom
Elements
Extends HTML Tags
1. It is understood despite we could add thousands of Tags to Standard HTML
tags, still Custom Tags will be required.
2. Loading & Unloading JS frameworks Creating Custom Tags with Templates for
each Application is Redundant.
3. Despite HTML 5 considered Offline Storage, each Application can have
different version of same framework and framework always not only just has
features only required by the application.
4. Web Components Standard Considered Supporting “Extension of HTML Tags”
and allow Templating to create Custom Tags

16. Web Components – HTML
Imports
1. Supports Reusing already loaded HTML Document
2. It Increases Modularity and maintenance of
various Components.
3. With First Class Support for Custom Elements &
Templates, it becomes essential.

17. “Web Component as NEW
STANDARD”
• Will make most of the work done by JS Framework redundant &
unnecessary.
• It will take years for all the browser to support this standard so don’t fear
if you are working on some JS frameworks
• JS Frameworks also will start supporting Web Components.
• Currently only “Google Polymer”, “Mozilla X-Tag” has First Class Support
for Web Components.
• Visit - http://webcomponents.org/ for more info.