Web components have been around for a long time, under the hood of HTML.They are simply a combination of HTML, CSS and JavaScript package together as an HTML element. Web Components actually account for many of the huge strides that have been made with HTML5.
One of the best example is the <video> element, by simply adding a SRC value to this, your video is displayed in the browser with button controls and time indicators, you have a player from just this one HTML element.
These are all actual Web Elements, we just never thought to stop and look at them all. When you saw this as part of the HTML5 specification you may have thought, ‘WOW that’s great’ but have you ever wondered how this was all built? How are the components we use and take for granted every day actually created?
Plus, we can’t just define HTML spec for ourselves, can we? Well that’s exactly what we can do. Browsers have been working really hard, over the past year or so to give developers access to this hidden part of HTML.We are not quite there, but the direction taken by all browsers to do just this is a good sign of good things to come. There are also a host of JavaScript polyfills available to give us the methods needed to take full control of our own HTML.
Web Components are constructed with four core elements of support that browsers have been working on. Custom Elements enables the creation and manipulation of custom HTML elements. HTML imports can import packaged HTML, CSS and JavaScript into an HTML page, whereas HTML Templates hold content or information that is not rendered on page load but is available to render at runtime finally. Shadow DOM enables the structure of a web component to be separated from the DOM of the page providing encapsulation. These four elements will be explained in more detail on my next post. The importance of this change in HTML development cannot be overstated. The evolution of HTML as a language, although excellent, has been pretty slow going. This is mainly due to it being in the hands of the browser vendors, with possible developments/ideas submitted by the general development community. These browsers then prioritise areas of development and gradually define new specifications and build support for these into their applications, but the ability to build our web components gives the entire community control to directly contribute to the evolution of HTML.