components of a jigsaw puzzle

Web Components—what are they, and how do they work? Imagine how much easier front-end web development would be if your HTML elements alone were powerful enough to build the client-side of a modern, dynamic web page. Better still, what if you could make your own custom elements and access a large, open-source community of ready-to-use components like buttons, toolbars, chat windows, maps and other common front-end features, saving you the trouble of having to build those elements yourself?

Enter Web Components, the latest set of standards currently being added to HTML and the DOM (Document Object Model) by the W3C. Web Components brings the web a bit closer to that dream by expanding the functionality of HTML elements with a set of web platform APIs that support the creation of custom elements. These standards can be categorized into four main specifications that can be used independently or together with any JavaScript framework or library that is compatible with HTML, making it easier to build a website:

  • HTML Imports: These make it easier to import HTML documents into other documents.
  • HTML Templates: These allow you to create sections of the DOM within a tag that can remain inert at page load, but be called on later at runtime.
  • Shadow DOM: This provides encapsulation of JavaScript, CSS, and templating so that your web component code remains modular and separated from the rest of the DOM.
  • Custom Elements: These are APIs for building your own HTML elements.

The goal of these new features is to simplify web development by providing low-level APIs that allow developers to build complex web applications from custom made elements. Calling upon these new elements will be as simple as invoking a pair of custom HTML tags.

Naturally, that additional functionality means Web Components will only work on modern browsers that support the new standards. See this chart for a list of browsers and which components they support.

Using Web Components

Using a web component is simple by design. Simply go to the the official Web Components website, pick a component, and import it into your HTML document and call the associated tags using the HTML Imports specification like so:

<link rel="import" href="mycomponent.html">
...
<mycomponent/mycomponent>

Only want your custom component to be instantiated when you call upon a particular view? Give the HTML Template specification try:

<template>
<div>The web component or HTML you wish to instantiate on will</div>
</template>

Within the template tags, scripts will not run nor will resources like images or video be fetched until the template is stamped out.

Creating Custom HTML Elements

The ability to create your own custom HTML elements is possible through the Custom Elements and Shadow DOM specifications. At the time of this writing, the latest versions of these two specs being rolled into some of the major browsers like Chrome, Mozilla, and Safari, are colloquially referred to as “v1” APIs. The basic idea of the current v1 specifications is to define a new HTML element and its tag using JavaScript. Then, encapsulation is handled by creating a Shadow DOM, which protects the component from being changed by the parent page it’s being imported into and vice versa. You can learn how to create your own HTML elements through Web Components by checking out their handy guide here.

If you’re really serious about implementing custom web components into your next project, you might want to check out one of these libraries:

  • Polymer. Google’s JavaScript library for web components is considered the current gold standard for those looking to build their own custom HTML elements. It’s the most comprehensive library out there, encouraging the use of all four specifications together to build custom HTML elements.
  • X-Tag. The Mozilla-born, Microsoft-backed library for extending the functionality of the Custom Elements specification.
  • Bosonic. This library places an emphasis on “what works now” using the existing specification of proven web components and providing compatibility with older browsers like Internet Explorer 9.

Since all are based on W3C standards, you won’t have to worry so much about which library your particular web component comes from. They all provide an abstraction layer to help you write web components faster with less code. When it comes to building custom HTML elements, choosing one platform over the other is all about which flavor of syntactic sugar you prefer, and the communities that have developed around them.

Ready to get started? Create an awesome job post that attracts the freelancers and skills you need.

Current State of Browser Support

When you’re talking about Web Components and browser compatibility, it’s useful to be aware that there’s an older, battle tested set of v0 APIs mostly based on polyfills (native for Chrome) and a newer set of v1 APIs that play nicely with JavaScript ECMAScript class-based syntax. As a result, Chrome is the only browser that has native support for the v.0 implementation of the standard while other major browsers rely on polyfills. A polyfill is a plugin that simulates missing browser capabilities as closely as possible so that a feature like Web Components can work on that target browser.

The v.1 standards which have more recently been adopted by major browsers solved many of those syntactic issues that plagued v0. Browsers were thus happier to invest in native support for v1 standards, and you can generally feel safe using Web Components for the latest releases of most major browsers.

Whether it’s through polyfills or native support, the latest versions of these browsers support Web Components:

Desktop

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Edge
  • Internet Explorer (8+ with Polyfills)

Mobile

  • iOS
  • Android
  • FirefoxOS
  • KindleFire
  • Windows Phone
  • Opera Mobile
  • Blackberry OS
  • webOS

Should I Use Web Components?

Imagine having the support and functionality of a framework like AngularJS, with the simplicity of loading custom widgets directly into the DOM. With the recent adoption of v.1 standards by major browsers like Chrome, Firefox, and Safari, companies have already begun using Web Components in production. Some of the more noteworthy examples include, GitHub, Comcast, General Electric, and of course Google. That said, older versions of browsers and other major holdouts like Microsoft Edge mean you’ll still need polyfills if you want your product to function properly across a majority of users’ computers.

However, the beautiful thing about Web Components is that you are free to use them as little or as much as you want. If the idea of helping pioneer the componentized future of the web appeals to you, by all means start to phase in the latest standards at your own pace. On the other hand, if you want the advantage of the concept of reusable components, but with a more production ready product, an established modular JavaScript framework like React might be a better alternative.

At the end of the day, Web Components is another tool that can be used independently or alongside your framework of choice to help bring your next web project to life.

Get more work done faster with freelancers. Post a job today—it’s free!