Web Components is still a very new technology, its specifications being evolved as browser implementers and Web developers gather experience using it. Its implementation status is variable and evolves quickly; this article lists the status in Gecko, used by Firefox and Firefox OS.
The following features are implemented and activated by default in Firefox:
- Implementations of the new consensus-based Shadow DOM and Custom Elements are expected to ship in Firefox in 2018.
These features were considered for implementation, and have some experimental implementation.
- HTML imports, as there is a lack of concensus about how they should behave. Mozilla in particular wants to wait to see what do developers do with ES2015 modules (not implemented yet; see bug 568953). There was an early unfinished implementation of imports which will be removed from Firefox.
Using polyfills with Firefox
There are a few caveats to consider when using polyfills with Firefox:
- When you activate native Web Components support in Firefox by setting the
about:config, the incomplete native implementations kick into action and the polyfills might get confused; this has a strong possibility of breaking things.
- A polyfilled Shadow DOM using the webcomponents.js polyfill doesn't actually encapsulate style, so the styles might bleed through. Be aware that sites built using the polyfill might look different when running in an environment that does support native Shadow DOM.
- The Shadow DOM polyfill is also very slow as it rewrites the prototypes of DOM elements to hook into their functionality (so it's more of a polyreplace than a polyfill!).
- If you don't need to use Shadow DOM, it's advisable to use the webcomponents-lite.js version of the webcomponents.js polyfill; this one doesn't polyfill Shadow DOM.