Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you're on a federal government site.


The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Web components

Initial Impressions

First, check out this article and its follow-up for some background on whether Web Components (or, more specifically, custom elements) are ready for production. TL;DR:

My first stop when sussing out web components was, which appears to be a collaboration between Google (makers of Polymer), Mozilla (makers of x-tag) and other open web technology folks. There’s also, which serves as a showcase for custom elements made primarily with Polymer and x-tag. I also enjoyed poking around the examples on, which are all available on GitHub.

So, what about the tools?


I tried Mozilla’s x-tag first, and was impressed. The API is simple, I liked that you can declare components in vanilla JS, and I was able to get something working in Chrome quickly. However, I was forced to abandon it after running into untraceable errors in x-tag core when testing in IE9. x-tag also relies on the same polyfills as Polymer, which are a pain to get and update (see below for more details). Survey says:

:-1: I couldn’t get it working in IE9—or any browser other than Chrome, for that matter.


Google’s Polymer Project fully embraces HTML imports, which are a way to encapsulate your component’s contents, behavior and appearance in a separate HTML file. It’s a neat framework, but it also assumes that you want all of the bells and whistles, including two-way data binding and the shadow DOM. In my testing it also appeared to be wholly incompatible with IE9, and thus basically unusable at 18F.

:warning: The suite of polyfills that Polymer requires also entails an unnecessarily convoluted build process if you don’t need all of its features. Documentation for the polyfills is sparse, and I was unable to find any mention of the errors that I encountered in IE9. For future reference, it’s best to get everything from a CDN or install them from npm or bower. Also, if you don’t need the shadow DOM, save yourself some bytes and use the bundled webcomponents-lite.js, which just provides custom elements and HTML imports.

:-1: Polymer gets my thumbs down for trying to do too much.

Vanilla JS (document.registerElement())

Next up, I tried out Andrea Giammarchi’s polyfill for the core custom elements API, the document.registerElement() function. Andrea’s polyfill has some major advantages over x-tag and Polymer:

  1. At just 3K minified and zipped, it’s tiny compared to Polymer’s hefty 150K payload (after you include all of the necessary polyfills).
  2. It works in IE9 if you include either aight or Andrea’s dom4 polyfill.
  3. The API does exactly what the spec says it should, and nothing more. No two-way data binding, no event delegation, no performance-hobbling shadow DOM shims (or shams).

:+1: Use this! It works great!


A link to Bosonic features prominently on, and claims support for IE9. Unlike x-tag and Polymer, Bosonic simply follows the web component specs and uses a transpiler to convert HTML imports into vanilla JS and CSS at runtime. Check out the docs for more info. The platform and runtime JS files weigh in at about 82K total.

:question: I didn’t get a chance to try this one, but it’s worth a look if you need HTML imports and shadow DOM.