Web Components: New hope for Web designers

Experimental Web technology aims to make it easier to build rich Web apps with ordinary markup and CSS

1 2 Page 2
Page 2 of 2

For example, your markup might contain a single word of bare text. Apply a Decorator, and suddenly you've changed its font, size, color, and positioning. Better still, a button has appeared next to it that comes prewired with an event handler.

Web Components also allow you to define custom HTML elements that extend existing elements. For example, you could create a subclass of the button element that has special properties. The Component that provides the custom button would include a constructor to wire each instance of the button with the appropriate JavaScript. There's no need to mess around with ID attributes and attach scripts by hand.

Another powerful Web Components concept is the Shadow DOM, which is like regular DOM, only it's hidden in the shadows. Its main purpose is to encapsulate the DOM of Web Components so that developers can't break them by fiddling around with a page's master DOM. It also exposes attributes of elements that you couldn't otherwise access. For example, you can use the Shadow DOM to change the look and feel of built-in widgets like sliders and scrollbars using ordinary CSS and markup, without resorting to JavaScript.

What can it do today?
There's a lot more to Web Components, and the details will change over time. For now, the technologies are all in flux. Their specifications are provisional at best.

If you want to experiment with them as they exist today, the place to start is Google's bleeding-edge, experimental browser Chrome Canary. It's for tinkerers only -- like the proverbial bird in a coalmine, it's prone to sudden death. But it won't interfere with your current browser; you can even install it side by side with a stable Chrome build.

You'll still probably need to enable some flags to get the Web Components demos working, and not every proposed feature is currently available. Remember, the project still in its early phases. Your best bet is to follow its page on Google+ for the latest updates and information.

Other browsers can't do anything with Web Components yet. But there's hope, in the form of another neat concept that's gaining traction with browser developers: polyfills. Essentially, a polyfill is code that provides support for a Web specification that you expect the browser to support natively in the future.

Polyfills have already been used to enable support for HTML5 features in older browsers. Now Google is working on a polyfill that will make at least some features of Web Components work on today's rendering engines.

In fact, one way to look at Dojo, jQuery, and similar toolkits is that they were early polyfills for some of what Web Components aim to do. "The way I like to think about this is that the toolkits that we've got now ... are a to-do list for the browser vendors," Google's Russell says. If Web Components become a standard, cross an item off that list.

This article, "Web Components: New hope for Web designers," originally appeared at InfoWorld.com. Follow the latest news in programming at InfoWorld.com. For the latest business technology news, follow InfoWorld.com on Twitter.

Copyright © 2012 IDG Communications, Inc.

1 2 Page 2
Page 2 of 2
How to choose a low-code development platform