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
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.
- Web Components Explainer
- Mozilla AppMaker
- Mozilla Brick