Web Components,the new standard in modular HTML development

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.

 

About the author

Asif Amod

I am a webtrepreneur, full stack developer and a technology evangelist. I have been coding from a young age. I also speak to databases and make servers do what I say, I am passionate about continuous learning. I thrive on challenges that require lateral thinking - no matter what language or technology. I have founded and Co-founded a number of startups and have created SaaS web applications for different industries. I am currently open to discussing and explore other opportunities.

Add comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

By Asif Amod

About Me

I am a webtrepreneur, full stack developer and a technology evangelist. I have been coding from a young age. I also speak to databases and make servers do what I say, I am passionate about continuous learning. I thrive on challenges that require lateral thinking – no matter what language or technology. I have founded and Co-founded a number of startups and have created SaaS web applications for different industries. I am currently open to discussing and explore other opportunities.

Member of The Internet Defense League

Recent Posts

Top Posts & Pages

DON’T MISS OUT!
Subscribe to my Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.
close-link
Sign up to my newsletter to receive weekly updates
Subscribe