Web Components is an umbrella term for four technologies that aim to make UI development easier and more modular. It has been in development since about 2011: a very long time for Internet standards!
All the specifications have been changing constantly as more vendors have started implementing them, and also as developers have gained real world experience in using them.
Therefore, it’s only natural that we are all confused as to what is and what is not natively available in each browser.
To date, in Firefox:
- Only <template> is natively available.
- The first iteration of the new consensus-based Shadow DOM is expected to ship in the first half of 2016. You can read Anne’s and Wilson’s posts for more details.
- There was an initial implementation of Custom Elements, based on prototypes, which is also the version Blink shipped, but Apple’s Ryosuke Niwa is fleshing out some experiments to come up with new approaches that use the ES6 class syntax instead. There won’t be active work on Custom Elements on Firefox until consensus is reached.
- HTML Imports are not shipping, as we want to wait to see what developers do with ES6 modules. There was an early unfinished implementation which will be removed.
We are very aware that keeping track of these changes is time consuming for developers who want to make sure their web components code works in more than just one browser. We’re addressing this issue by creating the Web Components Status in Firefox page in MDN. It will hold up to date information on what is implemented in Firefox, and any caveats you might encounter, so you can refer to it whenever you want to check what is available or not.
With thanks to Wilson Page, Anne van Kesteren, Andrew Overholt and Jean-Yves Perrier for their insights on this topic!
About Soledad Penadés
Sole works at the Developer Tools team at Mozilla, helping people make amazing things on the Web, preferably real time. Find her on #devtools at irc.mozilla.org