Last week I had the pleasure to take part in the first HTML5-IL meetup. If you are a front-end developer that live in Israel you should try and come to this group events. Lots of great developers, designers and others that share the same passion for the web. Great stuff. Unfortunately  I didn’t have more then 30min for this new, hot, complicated topic. So I hope to have more time to cover some of the aspects during the next meetup. From the four main aspects we touched only on the first two:

• Templates – It allow us to inert chunks of clonable DOM that can be activated for later use (e.g MDV). You can think of it as objects you creating out of your class definition. This new ‘object’ can contain markup (=CSS) and JS so it’s much more powerful from the ‘just’ CSS that we have today. We can use it as a decorator to give new style and functionality to our custom (new) HTML element.
• Custom elements – which can be looked as our toolbelt when we are coming to build a new web app and we wish to reuse ‘wheels’ and not reinvent them. We showed how to create new HTML elements by expanding HTML’s existing vocabulary.

So next time, I hope to be able to give a more in depth look at:

• Shadow DOM – It’s like the regular DOM you know but it’s down in the ‘shadows’ hidden from our naked eyes. It’s main goal is to give us encapsulations. It’s the glue that let us insert and work with our components. Think of a ‘tab’ component that you don’t need to ‘know’ about it’s style, functionality etc’. It will work for you and you can’t break it from your javascript code because you forgot to use a namespace for your app logic.
• Mutation Observers – How to watch for changes in the DOM in the most efficient way.

Misc

Previous Talks (in english) on Web Components in Google Developers Live Israel

• Web Components part 1
• Web Components part 2
• Web Components Explainer explainer doc
• Custom Elements spec