Every now and then a technology comes out that changes the web landscape. In 2008, Google announced Google Chrome, a simple but fast and powerful browser. Around the same time, HTML5 started to emerge and gave us access to a lot of new features. Now it’s time to embrace another new technology called Web Components.

Although users won’t notice Web Components, they are probably an equally big change for web developers. First, let’s start with some history so we have a better understanding of how Web Components came to be.

When Dojo Toolkit was published, developers saw the advantages of having reusable modules. Today, when we mention plugins on a web page, most of us think about jQuery plugins since they are used almost everywhere and can do almost anything.

AngularJS and React showed us the direction in which the web platform is moving, with web elements that aren’t just visuals, but have complex logic on their own.

Similar to HTML5, Web Components is a name for a group of features:

The interesting part is that web browsers already use web components. For example, datepicker or <video> element are web components, they are usually just hidden from the developer.

JavaScript widgets and plugins are fragmented because they rely on different libraries and frameworks that might not play nice together. Web Components are a way of standardizing widgets and plugins.

The great thing about Web Components is encapsulation and, therefore, reusability – they can be used with any library or framework. Web Components don’t even need to be UI components – they can even be libraries that expose some functionality.

One of the examples is polymer-ajax, which isn’t that useful but it gives us an idea what’s possible. Polymer-ajax is a web component that gives the developer a standard way of doing AJAX requests, so the developer doesn’t need to worry about browser quirks. It is something like $.ajax() in jQuery, but it doesn’t have any dependencies.

Currently, the main issue with Web Components is that no browser supports them completely. Luckily, there are libraries like Polymer that polyfill missing native features and go out of the way if the browser supports the feature.

Polymer (Google) has two parts – one for creating web components, and another for using them.
Another Web Component library is X-Tag (Mozilla). The great thing about Web Components is that, no matter whether they were built with Polymer or X-Tags, they can seamlessly work together, and that exactly is the beauty of standardization.

Using the Polymer library, Web Components can be used in all evergreen browsers (the newest versions of Chrome, Firefox, Safari and Opera) and Internet Explorer 10 and newer. On mobile, web components will work on iOS6+, Chrome Mobile, Firefox Mobile and Android 4.4.

Older browsers like Internet Explorer 9 or Android Browser 4.3 don’t support Web Components, even with Polymer.
This means that Web Components aren’t ready for use on the web, but they can be used inside of a native wrapper if the app targets a supported browser or platform (iOS6+).

Although X-Tag library supports some older browsers for creating components, Polymer is required to use most of them and, therefore, the browser support is the same.

Web Components might not be ready for use yet, but there are some libraries that already make use of some similar patterns to achieve the DOM abstraction:

Web Components might not be the silver bullet that will solve all web development problems, but once they gain a big enough support, they will simplify the development and maintenance of web pages and apps.

I believe that in a few years embedding a YouTube video using a <youtube-video> component or displaying your Facebook profile on your web page or blog with a <facebook-profile> component will be normal. Also, when reusing an element you don’t have to worry if the new code will mess up something else or the other way around, which will make web development much easier.