What Are Web Components

Web Components are designed to facilitate the creation of reusable HTML widgets. Google and Mozilla support this initiative of the W3C which introduces the concept of reusable HTML tags.

Web Components are a collection of several standards which allow web developers to define their own vision and elements in creating a website with the help of HTML, CSS and JavaScript.

What is the goal of Web Components? To revolutionize how a Graphical User Interface is being made, inside W3C. W3C introduces the notion of reusable HTML tags.

“Web Components allow you to combine several elements to create reusable widgets at a high level with what is now possible by limiting oneself to CSS”, explains W3C. Although the process of standardization of Web Components needs more time to develop completely, browser vendors begin to commit to this new promising technology. Google and Mozilla have put together their efforts to support it.

Custom elements

The custom elements are important for web developers to define new types of HTML elements and manipulate them using standard Javascript API. Web Components wouldn’t exist without the features unlocked by the custom elements. Find more about this topic on W3C page.

First frameworks made by Mozilla and Google

Next to Google, stands the Polymer project – a set of user interface components and utilities for creating web applications. This is a new type of library who uses Web Components to build web applications. Launched by Google, this library is compatible with all browsers, and also it allows the use of all the latest features of HTML5 for all evergreen browsers (browsers which daily are updated automatically), by using polyfills.

As for the Mozilla Foundation, the software proposes the polyfill library x-Tag, as well as a lybrary component called Brick.

Brick, a collection of HTML5 widgets

Nowadays, HTML5 is a crucial part for the development of cross-platform mobile applications. However, it suffers from a serious lack of widgets. Mozilla developed this collection of widgets called Brick, built with x-tags, destinated to be integrated in many mobile applications projects. With Brick, you can manipulate the menus, date pickers or calendars; you can even see more complex components (e.g. slides with animated transitions).

Brick is based on Mozilla’s X-Tag polyfill library, that means if you want to run a code which relies on any of the Brick’s wall, you’ll need  to wait until the x-tags library’s “DOMComponentsLoaded” finish.

I invite you to visit sources about Brick on Github if you want to see an example of web component creation.

Post A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.