July 29, 2014

The Web is Getting Smaller, Thanks to Components

HTML5 and JavaScript seem to be living up to Trotsky’s dream of the Continual Revolution (NewsAlert).  In some ways this makes a lot of sense because the Web is probably the most unifying piece of technology invented since the kitchen sink.

Anyway, the point of this article is to talk about Web components and the impact of them on HTML5.  You see, we have a lot of ways to do things now with JavaScripting and the older server interfaces like PHP, etc. 

However, enabling HTML5 and browser experiences for everyone is a definite objective of many people in the coding community.  There is an assumption that a community will grow with web components and that GitHub we filled with useful examples. 

Eric Bidel of Google (News Alert) has demonstrated that components take on everything from map interfaces to toolbars.  The point is that coding is again minimized and made easier.

As stated by the W3C (NewsAlert) working group, the component model for the Web ("Web Components") consists of five pieces:

1. Templates, which define chunks of markup that are inert but can be activated for use later.

2. Decorators, which apply templates based on CSS (NewsAlert) selectors to affect rich visual and behavioral changes to documents.

3. Custom Elements, which let authors define their own elements, with new tag (NewsAlert) names and new script interfaces.

4. Shadow DOM, which encapsulates a DOM subtree for more reliable composition of user interface elements.

5. Imports, which defines how templates, decorators and custom elements are packaged and loaded as a resource.

Each of these pieces is useful individually. When used in combination, Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.

Some aspects that are good for hackers like me include the failing silently.

Edited by Alisen Downey


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More