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.Last week I had the pleasure of listening to Dan Callahan give the keynote ...
I've made it my mission over the past few years to focus my energy in this direction. Any one who reads this blog or listens to me give presentations know 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 thi