Angelina Fabbro: Building with Web Components using X-Tags

Orde Saunders' avatarPublished: by 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:

  • Web Components Explainer
  • Mozilla AppMaker
  • Mozilla Brick