Engagement/Developer Engagement/Grab bag/Web Components

Web Components are a massive change in the way we create applications and other products for the web. In essence, what Web Components allow you to do is to create your own HTML elements, that will be rendered by the browser under the hood. What does that mean?

• Think of the select element in HTML. What you do there is to write a simple element and the browser renders a very complex interface for the user that allows to expand a list of items, choose one or more, navigate between the options and many more things. It also defines keyboard and mouse interaction with this list for you, without you having to do anything.
• Think of a video element in HTML. This one is a video element pointing to one or more resources, and the browser gives you a full player interface, including play button, volume control, scrubber bar and many more things.

None of these complex interfaces are magical: all they are is HTML, CSS and JavaScript, but they are hidden from you in the source code. Normally everything you see in the browser is also viewable in the source code of the page as all these parts are part of the DOM (Document Object Model). The parts generated by the browser, like the volume control bar or the list popup are part of the Shadow DOM. You can see those using Developer Tools.

With Web Components you can create your own HTML elements and hide complex structures and functionality in a simple element for people to use. Widgets like these are better than for example jQuery driven DOM widgets as they are part of the browser flow. The browser is busy painting a picture all the time. With DOM widgets you work against this and have to ensure that the browser gets notified of changes in your widget and paints them. With Web Components your widget already becomes part of the browser doing its job.

Web Components in the wild

Currently Web Components are supported by Chrome and Firefox. Google are very much drivers of Web Components and created the Polymer framework to allow people to create Components that work across all modern browsers. At this year's Google IO they also announced example widgets for Polymer that match the look and feel of Android L.

In Mozilla, we are also 100% behind the idea of Web Components and we add more and more features to the platform. We built our own library called Brick that works out the kinks between browsers and is used to power the user interface of Firefox OS.

Web Components resources

• Mozilla Brick is a library to make Web Components work across browsers. We use Brick to create a lot of the FirefoxOS UI. You can see demos on GitHub and get the source from GitHub
• Polymer is an open source Web Components polyfill library strongly powered by Google. It is heavily used to bring the Material Design look and feel of Android to the web. There is even a WYSIWYG design tool.

Web Components articles and videos

• Todd Motto: Web Components and concepts, ShadowDOM, imports, templates, custom elements
• Eric Bidelman at Google IO 2014 - Polymer and Web Components change everything you know about Web development
• Tuts+: How to create your own HTML elements with Web Components