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.

Now common elements like image sliders, which typically require HTML, CSS, and JavaScript, can be simply packaged as a new custom tag for easy reuse.

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.

HTML Templates

<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.

Shadow DOM

Shadow DOM encapsulates the DOM for your widget. This keeps it from being affected by unrelated stylesheets and JavaScript. Without shadow DOM, you wouldn’t be able to just drop in a widget because there would be no guarantee that it’d work. When using shadow DOM, an HTML element can be the shadow host for a shadow root. Instead of the shadow host’s content being displayed, the content of the shadow root is displayed instead.

Custom Elements

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.

HTML Imports

With HTML imports, there’s no more need to duplicate code or load all your CSS and JavaScript resources independently. HTML imports load fragmentary HTML files and define the resources you need. Besides simplifying reuse, they speed up web page loading because they won’t reload a resource that was previously loaded, a common issue when libraries have overlapping dependencies.

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.

Bosonic is a tool to create web components in a way that shelters developers from changes in standards. It turns HTML components into JavaScript and CSS, making them independent of browser levels of support for web components.

As an alternative, some current JavaScript libraries have also started providing support for similar encapsulated, reusable components.

React.js provides an implementation of web components where defining a component effectively declares a render function that returns HTML elements for display. Because the implementation is not a standard, components created this way can only be shared with other applications using React.js. React also still keeps CSS stylesheets separate from the JavaScript component implementations.

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.

Browser Support

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!