If you’ve ever created a cool feature for your interface and then had to copy-paste the markup into a dozen files, you’ve run into one of the basic limitations of HTML. It’s a markup language, not a programming language, and you can’t create new tags or package components for reuse.
HTML5 web components change this. First introduced in 2011 and developed by W3C, this technology is still relatively new but has the potential to really impact the web development ecosystem.
With web components, developers can create encapsulated widgets and create their own new tags for web documents and applications.
An Overview of Web Components
To understand and start working with web components, you need to first become familiar with HTML templates, shadow DOM, custom elements, and HTML imports.
<template> is an HTML5 tag used to define non-renderable fragments of HTML. Although they aren’t displayed on the page, templates are parsed and can be used during runtime to modify page contents. A typical use would be to populate data in a table.
Custom elements define the names of new widgets. If you’re creating an image slider, you can define a tag . Wherever you need a slider in your pages, you would use … like a standard tag. Once you’ve defined the tag, you add features and functionality to a prototype object to make it useful. Custom elements can be entirely original or extend the functionality of HTML5’s standard elements.
Web Component Libraries
Feeling adventurous and want to try it out yourself? You can either create web components from scratch or leverage libraries to help make your life a little bit easier.
The Polymer Project is Google’s contribution to web components. It uses a declarative syntax to create new elements. It also has pre-built elements, including elements that encapsulate Google’s APIs and services like Google Analytics and Google Calendar.
x-tags comes from Mozilla. It includes elements like maps and centered modal content, plus features like mixins to make creating your own tags easier.
The Angular.js framework also provides full support for MVC development; its directives are comparable to React’s components. Angular aims to have directives compatible with the HTML5 web component standard as well. When the web component standard is fully implemented, transitioning from Angular should be straightforward. Projects that use Angular for MVC will be able to use its other features while gaining the speed of native implementations of components.
As of today, the biggest obstacle for web components is the limited browser support. Google Chrome currently offers most comprehensive support with Mozilla Firefox following close behind.
While other browsers catch up, developers need to include a polyfill webcomponents.js for components to work. This is beneficial because some browsers already provide native implementations of the necessary functionality and, when available, webcomponents.js will use that so that there is no performance impact. This means developers don’t need to track the implementation status and load code differently in different browsers. However, it is important to note that older browsers such as IE8 will remain incompatible due to insufficient DOM support.
What’s Next for Web Components?
Technology standards and best practices within web development are constantly evolving and web components are just another step forward in this process. While they may not be completely ready yet, web components definitely have the potential to offer huge leaps in simplifying web development for the future.
Many major companies like Google are investing heavily in developing their web component libraries and are working to resolve remaining issues. In the meantime, the community for developing custom elements continues to grow. We’re hopeful for the future and excited to see if web components can make their way into mainstream use within the next couple of years!