I know, I know. The title sounds like SEO-link-bait, I apologize. I want to talk about something that I’m fairly excited about, and I hope it excites you as well.
I’ve made it my mission over the past few years to focus my energy in this direction. Anyone who reads this blog or listens to me give presentations knows this. Developing for the web can still be pretty darn frustrating, but at least the tools, and the environment, are growing in leaps and bounds. There’s some growing pains here, but my God, there’s growth.
That is why I’m so excited to be hearing more and more about Web Components. Web Components refer to a few different technologies (that I’ll list in a moment). But in general, they represent an incredible change in the web. To me, they truly are “Web 2.0.” For the first time you’ll be able to define new building blocks (tags, behavior, design) by following web standards. You’ll be able to extend the web. That is awesome.
So what are Web Components? In general, they describe the following technologies/specs:
The Template feature will provide native support for this. You will be able to use a template tag within your HTML document. The content in the tag is not executed until you actually clone the template and add it to the DOM yourself. So any images or script blocks won’t be loaded until necessary.
To be clear, this isn’t the exact same as something like Handlebars.js. You don’t get token replacement. But it is native to the browser itself which means less additional code.
You can read more about the spec here: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html
Shadow DOM is – for me – the hardest concept to get my head around. I probably will not do a great job describing it, but in essence, it is a way to create a “black box” style system for content. Let me give you an example. Imagine you are writing some HTML that is meant to be consumed by someone else. Your HTML is just a H1 tag and a paragraph. You want to style this content, but in order to do so, you have to ensure your CSS does not conflict with anything in the parent document. An iFrame can solve this, but iFrames create other challenges as well. With the Shadow DOM, you can essentially say, “This CSS will apply to this block only. Period. Nothing will leak out or in.”
Again – I’m not the best person to speak on this. You can read more about it at the spec (https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html) or check out the excellent HTML5 Rocks article on the topic.
If you have ever used something like jQuery UI’s Tabs to add tabs to your site, web components will allow you to do it all via web standards.
The final piece of the puzzle is HTML imports. Essentially, once you’ve defined a custom element, applied some layout to it via the Shadow DOM and custom behavior, you can then create a reusable template that can be shared with others. In the same way you import a style sheet, the link tag will allow you to import custom elements. For example, x-tab or x-cowbell.
You can find the spec for this here: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/imports/index.html
So What, I Can’t Use It Now!
I bet you’re asking, how well is this stuff supported? Right now support is pretty limited. In fact, custom elements aren’t supported at all yet. The features that do work now are limited to Chrome and Firefox Nightly. The specs are still in development. Keep in mind though that a majority of our major browsers now are moving to a continuous update cycle. If you are still of the mindset that you don’t need to care or pay attention to web standards then you are failing in your job as a web developer.
Want to know more? There is an awesome, and short, video by Eric Bidelman of Google that you can watch on this topic. I’ve embedded it below. You can also find his slide deck here: http://www.webcomponentsshift.com/. Do note though that you are supposed to click the right arrow to start the presentation. The initial gray screen confused me a bit and I assumed something had broken.