Are We Componentized Yet?

Tracking the progress of Web Components through standardisation, polyfillification1, and implementation.

Specced Implementation
Polyfill Chrome / Opera Firefox Safari Edge
Templates Stable Stable 8 13
HTML Imports Stable On Hold No Active Development Vote
Custom Elements Stable Flag 10.1 Vote
Shadow DOM Stable Flag 10 Vote

Cells are clickable! Yellow means in-progress; green means mostly finished.

Last Update: Jan 2017 — Safari 10.1 will include custom elements.

Web Components!?

What are web components? They are encapsulated, reusable and composable widgets for the web platform. If that sounds cool, then I urge you to check out one of the very good introductions to them that others have provided. In my opinion, they're the most exciting thing to happen in web development since HTML5. Why? Because they promise to put the power and extensibility necessary to build sophisticated widgets and applications right into core web feature set. Imagine the capabilities of libraries like Angular, Ember, and Backbone, but as a foundation of the platform, standardised across all browsers.

The purpose of this page is to track progress across the various documents where web components are being specified, the polyfills that let you use them today, and their implementation in browsers that will make them a first class citizen of the web in the months and years to come.

For lots more information about Web Components, including discussions, developer docs, and best practices, check out webcomponents.org. For available components made by the community, check out customelements.io

Specs!

Web components are being specified at the W3C, with Dimtri Glazkov leading the charge, ably assisted by various other heroes. Spec documents have a reputation in some quarters as being dense and unreadable, which is perhaps partly deserved. They do contain a lot of details that only browser engineers really need to worry about. But, modern specs also often contain very readable explainers and examples, and they're usually the most accurate and detailed source of information on how things really work.

Libraries!

There are three major libraries for working with and extending web components:

X-Tags by Mozilla

"X-Tag allows you to easily create elements to encapsulate common behavior or use existing custom elements to quickly get the behavior you're looking for. For example, check out Brick, which contains 14 custom elements optimized for Web Applications."

Polymer by Google

"Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond."

Bosonic

"We loved the Introduction to Web Components spec. What we wanted was a way to build components as this spec describes, shielding ourselves against potential spec changes, and supporting not-so-modern browsers like IE9. And so Bosonic was born!"

Polyfills!

A set of polyfills for webcomponents and other advanced parts of DOM and JS is now available at webcomponents.org.

All three libraries share and collaborate upon these polyfills, but each builds on them in a unique way. To quote the official X-Tag blog:

"X-Tag and Polymer are both high-level sugar libraries that build upon the W3 Web Components specs - each introduces a different approach to making development of web components an even more amazing experience. To help make this more relatable, consider the following: jQuery : DOM :: X-Tag/Polymer : Web Components."

Code!

Implementation of web components within browsers has begun, although the split of Blink from WebKit has muddied the waters slightly. This appears to be the status at present:

Who made this?

I'm Jon Rimmer, a web developer who spends way too much of his free time reading blogs, W3C mailing lists and teleconference minutes to find out what's happening with the web platform. I don't work for a browser vendor or standards group, but I've been a fan of the web components technology since I first heard of it, and this is my way of helping me and others keep track of its development. I have a blog, where I ramble unceasingly.

If you spot anything that's inaccurate, outdated, or could just be improved, please let me know via GitHub.