Simplify Web design with Web components

With Web components, you can design and test a set of UI elements or controls once, then package them for use on other sites or services

Simplify Web design with Web components

One of the more interesting developments coming out of the Word Wide Web Consortium’s standards process is the group of technologies that power Web components.

Designed to help developers produce reusable elements that can help simplify Web page design and development, they’re the underpinnings of design tools like Google’s Polymer. But what goes into making a Web component, and what will you need to think about if you’re building your own tooling?

Web components, as they currently stand, are actually a mix of several different HTML5 technologies. Some handle interactions with a page’s DOM, while others handle inserting code into page content. Not all of them are supported by all browsers, either. You’ll find Chrome and Firefox offer the best support, with Microsoft’s Edge currently starting to implement some key features. That doesn’t mean you can’t use them -- as with Google’s Polymer components, you can use a polyfill to add support for most of Web components' main features.

At the heart of Web components is the idea of custom elements, as shown by Google’s Polymer. The W3C defines Web components as providing “a way for Web developers to build their own, fully featured DOM elements.” It’s an important concept because it allows for the Web to be customized easily without affecting the underlying technologies that power our browsers. That means it also provides a mechanism for experimenting with new tags, as well as a way of bringing associated technologies (like SVG and MathML) into a common framework.

A custom element looks like any existing HTML element to a designer or a developer. That means it needs to obey the rules of the HTML namespace, and while it must contain a hyphen, it can’t overwrite the existing hyphenated elements already in use on the Web. New elements must be attached to a document’s registry, along with its interface definition. If there’s no registry in a document, then a custom element will be ignored.

The result is an encapsulation of all the code that makes up a user interface element in a page as a single custom tag, much like a browser implementing the <video> tag. With a complex tag, a browser handles displaying all the controls needed to play a video, as well as loading the video itself. A well-defined Web component behaves much the same, handling all the user interface features needed to, say, implement a scrolling list box.

To continue reading this article register now

How to choose a low-code development platform