I recently watched Eric Bidelmans presentation on Web Components at Google IO 13. Web Components is an effort to bring true modularisation to web development. For the first time you’ll have encapsulation at the browser level. No more mess with duplicate IDs or mixed CSS style rules. The building blocks of Web Components are
If you think this is a long way of and available in a few years, then you’re completely wrong! You can use Web Components
today. And they are already used by the browser vendors under the hood.
This article from
Dimitri Glazkov opened my eyes. Many of the new HTML5 elements like
<input type="date"/> or
<video/> are implemented using Web Compontents. You can see the
markup behind those elements if you enable Shadow DOM in Chrome Canary. The screenshot below shows the internal markup
<input type="date"/> element:
If you want to start creating your own Web Components, I strongly recommend to take a look at Polymer. It’s a framework for developing Web Components today. It fills out missing browser implementation with so called polyfills.
Let’s jump into Web Component development and build a
v-card element which renders a business card. The following
code shows the host page containing the custom
v-card element. It expects a fullname, a title, several
links and a logo. The parameters are wrapped in regular HTML elements. The class names are taken from the
hCard microformat and are used later to select the relevant information.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
v-card implementation uses its own CSS styles and markup. Thanks to Shadow DOM they don’t conflict with the
host page. The data for the business card is pulled from the host page using the
<content> element and CSS selectors.
Finally the call to
Polymer.register(this) takes care of all the polyfill magic to make this work accross all
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
Below you can see the
v-card Web Component in action. Please note that I’m unsing CSS3 flexbox to render the
business card. Support for flexbox is somewhat limited. Chrome should make
no problems, for Firefox you might have to enable
layout.css.flexbox.enabled in about:config. All other browsers
will most likely have problems rendering the business card. If that’s the case here’s a
I hope this simple example shows the potential behind Web Components. I’m convinced Web Components are the future of client side web development. If you want to dive deeper into the subject here is a list of useful resources: