This is part of a three part series:

What is WebComponents?

I found out that W3C has divided it into three parts (shadow DOM, Custom Elements & HTML Imports)

Shadow DOM

My understanding of Shadow DOM is that with Shadow DOM you can contain and scope HTML, CSS & Javascript without the need for any special tooling etc, just plainly scope it to its own little thing.

Custom Elements

The W3C Custom Elements spec

My understanding of CustomElements is that they are meant to define themselfs for the parser (browsers) and thereby be accepted as and rendered as regular HTML elements. The Custom Element in turn can have other elements inside of itself and functionality and trigger and listen to custom events and change its own scope.

I just saw a video with a talk about webComponents in wich they inspect the <video> element’s shadow DOM and finding divs and inputs and buttons that in turn make the <video> element with its nested element, styles and functionality. The video mentions that the features most of us use and develop features in will soon be native web features, thereby ending the need of certain Javascript-frameworks.

HTML Imports

The W3C HTML Imports spec

My understanding is that this part is meant for managing and getting WebComponents into your application/feature. The pattern used is similar to how we today import stylesheets: <link rel="import" href="/imports/heart.html"> and tada, you have access to your webcomponent just like that!

How to build a WebComponent

I will not go through that in this text, but if you want to know more, I would checkout:

How to build a WebComponent and use it today, that is entirely up to who you want to be able to access it. There are Polymer.js and I bet even more libraries that help you with this. Also there are polyfills for many of the features to ensure it works.

Browser support

Found this hopeful article reading up on how to build components for the current section: Browser Support from developers.google.com