Mozilla Brick: A Polyfill Library for Web Components

| by Dio Synodinos Follow 4 Followers on Aug 28, 2013. Estimated reading time: 1 minute |

Web Components is a W3C specification that aims to enable Web developers to define widgets with a high level of visual richness and interactivity, together with ease of composition. Until proper browser support is here, developers can be using the Brick library that provides new custom HTML tags to abstract away common user interface patterns.

Brick is based on Mozilla’s X-Tag polyfill library,  so in order to run code relying on any of Brick's tags, you’ll need  to wait until the x-tags library's "DOMComponentsLoaded" event instead of just window.onload:

document.addEventListener('DOMComponentsLoaded', function(){   
	// run code here... 

At the time of writing, Brick consists of thirteen different tags (“bricks”), most of which are completely independent of one another, and can even be downloaded separately instead of a single bundle:

  1. Appbar
  2. Calendar
  3. Datepicker
  4. Deck
  5. Flipbox
  6. Iconbutton
  7. Layout
  8. Slidebox
  9. Slider
  10. Tabbar
  11. Toggle
  12. Togglegroup
  13. Tooltip

Here’s how the calendar brick looks like:


Google who is putting a lot of trust in Web Components, is also working on a Web Components polyfill called Polymer, that using existing browser infrastructure tries to leverage future technologies like Shadow DOM, Custom Elements and Model Driven Views.

It is worth mentioning that although Web Components seem to have a lot of momentum during the last year, the specification is moving fast and there are still areas of uncertainty. A few weeks ago Google’s Dimitri Glazkov proposed in a W3C mailing list to remove the <element> element from the specification. The consensus on this thread was that the proposed <element> syntax wasn’t good enough and it should by left up to libraries to explore this field before standardization comes, as Brian Kardell from Apollo Group mentions:

Give projects like x-tags and polymer and even projects like Ember and Angular some room to help lead the charge on asking those questions and helping to offer potentially competing answers -- there need be no rush to standardize at the high level at this point IMO. 

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread


Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you