Last Update: Mar 2017 — Link to Firefox Shadow DOM v1 bug.
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
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.
- HTML Templates in the HTML Living Standard
- HTML Imports Editor's Draft — Working Draft
- Shadow DOM Editor's Draft — Working Draft
- Custom Elements Editor's Draft — Working Draft
There are three major libraries for working with and extending web components:
"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."
"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."
"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!"
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."
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:
Chrome is the gold standard. Google has been leading to effort to spec and implement web components, and two of its features, shadow DOM and templates, are already shipping in Chrome's stable channel, while development is fast progressing on others.
The shift from WebKit's bugzilla to the Chromium tracker has made it a little more difficult to follow the implementation effort, as there aren't the meta bugs and trees I used to use to follow everything, but most of the relevant issues are linked in the table above.
Mozilla haven't been slouching either, and have made good progress towards implementing various parts of web components in Firefox. They have a tracking bug here, and various features are being implemented via its dependencies.
The <template> element was added in Safari 8, but while WebKit engineers expressed a positive attitude to Web Components in theory, they had concerns about various aspects of their design. These were raised in the appropriate standards groups, where occasionally fractious technical debates ensued. Eventually, solutions were found, compromises were reached, and the WebKit team shipped v1 of the Shadow DOM standard in Safari 10.
Microsoft are developing a new browser, named Edge, and have posted an extensive guide to their thinking and plans regarding Web Components. Most excitingly, they have announced that they are working on implementing their first Web Components feature, the <template> element!
As Opera have switched to base their browsers on Chromium/Blink, I expect they will broadly follow Chrome in terms of implementation status.
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.