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)
The W3C Shadow DOM spec
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
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.
Found this hopeful article reading up on how to build components for the current section: Browser Support from developers.google.com