Web is evolving rapidly, If we analyze heavy modern web applications they are not only complex to design but also quite difficult to develop and manage. Given the range of tools involved, amount of testing required, and the combination of libraries/frameworks used, the development process has become complex. As the application scales in terms of features, it becomes harder to maintain the code and make enhancements.
For instance, take a look at the DOM of these few popular websites:
The complex DOM structure of modern web applications is largely due to indiscriminate use of divs and spans. HTML5’s semantic markup came to rescue, but it still falls short due to following reasons:
For example:
Tabs can be a very genuine example here. This codepen contains the simplest tabs we can have -
Given needs of modern web and innate need of DOM structure as essential, developer community has been mulling to make things easier and one of the manifestation of such discussions led to the birth of web components support at the browser level.
The promise of Web Components
Web components are a collection of specifications that enable developers to create their web applications as a set of reusable components. Each component lives in its self-defined encapsulated unit with corresponding style and behavior logic. These components can not only be shared across a single web application but can also be distributed on the web for use by others.
Fundamentally web components consist of 4 major specifications:
Links if you want to dive deep into understanding web-components
Custom Elements
They allow web developers to define new types of HTML elements.
Web Components don't exist without the features unlocked by custom elements:
Registering a custom element
There are 3 simple steps to register a custom elements:-
Lifecycle callback methods
createdCallback - an instance of the element is created
All of the lifecycle callbacks are optional. Following is the diagram showing the processing of lifecycle callbacks in custom elements.
Resources for Custom Elements
HTML Templates
HTML Templates are another new API primitive that fits nicely into the world of custom elements.
The <template> element allows you to declare fragments of DOM which are parsed, inert at page load, and instantiated later at runtime. They're an ideal placeholder for declaring the structure of custom element.
Example: registering an element created from a <template> and Shadow DOM:
I'm in Shadow DOM. My markup was stamped from a template.
Resources for HTML Templates
Shadow DOM
Shadow DOM is a powerful tool for encapsulating content. Use it in conjunction with custom elements and things get magical!
Shadow DOM gives custom elements:
Creating an element from Shadow DOM is like creating one that renders basic markup. The difference is in createdCallback():
Resources for shadow DOM
HTML Imports
HTML Imports, part of the Web Components cast, is a way to include HTML documents in other HTML documents. You're not limited to markup either. An import can also include CSS, JavaScript, or anything else an .html file can contain. In other words, this makes imports a fantastic tool for loading related HTML/CSS/JS.
Include an import on your page by declaring a :
The URL of an import is called an import location. To load content from another domain, the import location needs to be CORS-enabled:
<!-- Resources on other origins must be CORS-enabled. -->
Resources for knowing more of HTML Imports
Use Web Components today
The specifications mentioned above are quite new and it is hardly surprising to know that browser support is not very good. But, thanks to the Polymer library, created by the awesome folks at Google, we can use all these features in modern browsers today. Polymer provides a set of polyfills that enables us to use web components in non-compliant browsers with an easy-to-use framework. Polymer does this by:
In my coming blogs we will get deep into each of the specs of the Web Components and check out what role does polymer play in each of them to make the use of Web Components more easy and relaible.