We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Status of Web Components support in Firefox

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

Natively supported

The following features are implemented and activated by default in Firefox:

Upcoming features

Abandoned features

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 dom.webcomponents.enabled preference to true in 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.

Document Tags and Contributors

Contributors to this page: overholt, indolering, marcoscaceres, kdex, Sheppy, teoli, Sole
Last updated by: overholt,