Web Components – the future

You should first ground yourself on Web Components and read this article on Web Components and concepts, ShadowDOM, imports, templates, custom elements by Todd Motto.

Then listen to this Podcast (thanks to Steve for pointing it out) – Web Components with Peter Gasston

Once you have read/listened you will have some idea and concept about Web Components and how they are the future…..

But what I wanted to show briefly was how to enable the ShadowDOM in Chrome and what that can do for you in a cool kinda way.

HTML5 Elements

If you create a simple <input type=”number”> field on an HTML5 page you will now get a “Number Picker” which is more than just an Input field

And if you look at that through the web explorer (F12) you will see the HTML Markup for that

Enabling ShadowDOM

Within the Web Dev Tools for Chrome you can click on the settings button and within there under General “Show user agent shadow DOM”

And then if we look at our Number field again you will see it is actually marked up HTML which we did not see before.

The HTML5 number field is actually an HTML field marked up with HTML and JavaScript running within the browser. This is the fundamental concept behind Web Components – make a simple piece of HTML tag input but behind the scene do a whole load of cool things to make it functional.

Cool eh 🙂