Web Components: A Peek at the Future of HTML Code Structure

Dean Watts
Jul 22, 2016 · 5 min read

I was refactoring some of my HTML code a while ago and realized that at some point, even though I had done seemingly everything I could, my code still looked like a mess.

Problem

The mess of course, had to do with an excess of div elements:

This is not limited to just my code. Inspect the HTML on even the most popular of webpages (Amazon, Facebook, eBay, etc.) and it will be predominantly divs within divs within divs within more divs.

I came to learn that this over saturation of nested divs has the appropriate nickname “Div Soup.” Understanding that Div Soup was becoming a problem, when HTML5 was released it came with the below tags to help clean up code:

So now rather than reading div after div, we at least have some context for what we are looking at, but it did not really solve any of the Div Soup related problems. It rather made the problem more like Alphabet Soup. I accepted that this was the only fix to this problem, but have recently learned of a much more elegant solution.

Solution

Enter Web Components and Custom Elements. I was contacted for a job opportunity last night and in the job description an “Understanding of Web Components and Custom Elements Architecture” was preferred. I had not heard of either and began researching, and was surprised at what I found.

Disclaimer: Web Components and Custom Elements are new, experimental, and not supported by all browsers. Currently only Chrome and Opera fully support them. The technology is also constantly changing and improving, so the Custom Elements tutorial at the end may not be to the current standard depending on how far after 7/21/2016 you are reading this.

My previous places of employment required support for IE9+ so I had never heard of these powerful features, which is a shame because they are going to change the way we look at HTML!

What Web Components aim to do is natively add high level, reusable, HTML elements. Essentially adding whatever you want to the HTML vocabulary. While HTML5 added the tags mentioned above, Web Components allow you to add whatever tags you see fit. Modern front end frameworks such as Ember have support for their version of components, but Web Components are to be standard and work with all frameworks. If handled right, they should work just like any other HTML element like H1 or Div, similar to how Lego blocks from one set will still work just fine in another.

But wait. If they are reusable and work everywhere they’re supported…does that mean…

Yes! That means they can be shared! Websites such as CustomElements.io let you share your creations, or find ones that others have made. For example Paper Menu Button is a Web Component that creates a dropdown menu using just the component and the below code:

Very powerful, and much easier to read than if those tags were all divs!

Custom Elements

…and that brings us to Custom Elements. Custom Elements are one of the four standards that make up Web Components. I may touch on the other three, HTML Imports, Templates, and the Shadow DOM in a future blog post, but for now let’s focus on Custom Elements. Custom Elements are the solution to Div Soup I have been waiting for:

How do they work? Well lets use the <user-avatar> tag as a basic example. This code has been adapted from Mozilla’s great guide on custom elements, which can be found here.

And that’s it for our HTML. Easy! Now for the Javascript, where we define some meaning for the tag:

And lastly, we need to style these somehow. The code below shows how in your stylesheets you can use the tag itself to style the outer area of the component, and use the ::shadow pseudo element selector to select any interior elements you may add.

And thats it! A very basic example, but this user-avatar component can now be used everywhere in my project, with any data I want. It is neatly refactored into separate areas and the HTML code structure looks nice and clean.

In conclusion, the componentization of the web is the future, and while it is not currently supported everywhere, I believe it is only a matter of time before our HTML structure becomes a lot easier to read.

Further Reading:

Dean Watts

Written by

Software Developer in Manhattan. Passion to learn and teach about the power of programming.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade