Angelina Fabbro: Building with Web Components using X-Tags

Published: November 8th 2013by Orde Saunders

Angelina Fabbro (@angelinamagnum) was speaking at Full Frontal about web components, these are my notes from her talk.

Web components are the new HTML5. Conglomerate of technologies.

HTML imports
Shadow DOM
HTML templates
Custom elements

Shadow DOM: Document hidden in an element. Much like an iframe.

What is a component? Does one thing very well - essentially black boxes. Encapsulation, reusability, robustness, expressiveness.

What is Brick? Custom elements built using X-Tags. X-Tags enable the creation of custom elements. Brick is a small library that enables the creation of custom DOM elements, it's not a framework. Used to provide some basic widgets for FirefoxOS for rapid prototyping.

Include the brick lib in a page. Add some <x-[name]> elements which can contain any markup you want, including more <x-[name]> elements. The library can hook into these elements. We register JS code with xtag.register() to hook up functionality to these custom tags. This has a lifecycle callback that will trigger on events such as created, inserted, removed &c. It also has custom attributes similar to Angular.

flathead.herokuapp.com/designer is an example of how this can be used.

Browser support in IE9+. Sharing code with Polymer project - don't have to learn different ways of doing the same thing.

Resources: