Intro

A webpage is a document, typically written in HTML language to be served to a user through a web browser.

A typical webpage includes, basically, one or more of the following sets of information:

  • Multimedia: text, static and animated images, audio and video
  • Style and color: Cascade Style Sheets (CSS)
  • Interaction: JavaScript…etc.
  • Data transmission: Forms
  • Embedded objects: Shockwave flash, Java applets…etc.
  • Symantec markup: Microformats, OpenGraph…etc.
  • Meta data: Description, keywords, MIME-type, geo location, robots…etc.

Problem Definition

In terms of continuous coding and development, the above-mentioned sets of information become, usually, mixed up, interdependent and scattered in one or more files. The worst case happens in big websites when there are thousands of lines of scripts and CSS affecting hundreds of elements, superseding each other and sometimes conflicting with each other. The web project then becomes very hard to debug and maintain. There will become, also, huge number of lines of unused and non-functional anonymous script and CSS.

The solution

Web components principle suggests that any webpage may be divided into or composed of separate components. The component consists of encapsulated script, CSS and attributes. The component is “plug and play” and can be reused in other websites. Therefore, it can be easily maintained, developed alone, plugged or removed from the website on the go.

Web Browser Requirements

The W3C specified 4 requirements for web browsers to support web components. They are:

  1. HTML Imports: e.g. suppose you want to use a clock component in your website, the browser must allow importing its definition file. For example:

<link rel="import" href="clock.html">

  1. Custom Elements: e.g. if I want to show the clock component, the browser should allow using the custom element defined in the component file. For example:

<clock location=”Amman”></clock>

  1. Templates: The component definition file will require the template tag which can be used by script to create one or more instants of that template:

<template><content></content></template>

  1. Shadow DOM: DOM (Document Object Model) is a tree structure of the webpage elements starts with the document as the root and created by the browser internally to facilitate representing and interacting of the elements. Shadow DOM means the browser's capability to treat a component in a separate encapsulated DOM tree. For example, in the definition file of the clock component you will find the following code:

<dom-module id="clock"> … </dom-module>

Current Web Browsers Native Support

All web browsers currently support HTML5 which has the <template> requirement in its standard by default. For the other three requirements “HTML imports, custom elements and shadow DOM”, Safari has no support and Firefox has partial support. However, Google Chrome and Opera do support all the requirements of web components nowadays. The reason for this lack of support in some browsers comes from that fact that standards of the last 3 requirements are still under development by the W3C.

Workarounds for Lack of Browsers' Native Support

Although web browsers' native support to web components is still under development, several JavaScript libraries have been developed based on the current W3C draft standards to fill all or some requirements of web components for non-supporting browsers. For example:

Web Revolution

Using web components, web pages will become more organized and easy to debug, maintain and test. Components are encapsulated plug-and-play "HTML, CSS and script" used and reused as one unit. This is actually revolutionary to the web development since years.

Other articles by the author: