Shadow DOM in Firefox!

Wow, this has been a nice surprise to start the year :-)

If you want to start creating shadow roots like there's no tomorrow, you'll need two things:

  1. An updated version of Firefox Nightly. Get one from the Nightlies website.
  2. Manually enabling web components, because they're disabled by default. Go to about:config, look for dom.webcomponents.enabled and double click the property to toggle it to true.

No restart was required (at least on my case), and BAM! I could start doing things such as... var container = document.createElement('div'); container.createShadowRoot();

But all the examples in the world use webkitCreateShadowRoot()!!!

Worry not. Following established monkey patching traditions, I've created an small shim that monkey patches browsers that only implement webkitCreateShadowRoot so they can use createShadowRoot instead. Here's WebComponentsMonkeyPatch in all its glory. Once you include it in your projects, you can start writing future-proof code today (and updating older webkit- based code to use unprefixed methods).

I have also written this simple example demonstrating how to create unprefixed Shadow Roots like there's no tomorrow.

The umbrella bug for tracking Web Components work in Firefox is still not resolved, which means that this might not work totally as you'd expect when you get excited and start playing with this. In which case, please file bugs and help us make Firefox better ^_^