DEV Community

Hakatana's Hacks
Hakatana's Hacks

Posted on

ELI5: What Are Web Components?

This week we'll be exploring web components: "a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements."

Essentially, in layman's terms, this means something which allows you to make custom, reusable HTML tags made with JavaScript. Web Components are available in all major browsers today and they can allow for more simple brand standardization as well as accessibility between websites.

Web components are really useful in case you don't want to use something like Express or Flask or another heavy framework for your website while still wanting to plug-and-play components across websites. Plus, you don't have to learn a new framework every single year. Check this article out on web frameworks vs web components: https://medium.com/@oneeezy/frameworks-vs-web-components-9a7bd89da9d4

Web components are really useful for accessibility and brand consistency as well. YouTube currently uses web components for many of their major features to allow them to simplify the process of keeping their branding consistent site-wide and avoid having to reinvent the wheel 5,000 times - plus, they can focus a lot more on making their site accessible and not worry about having to audit all their pages for accessibility when they know all their components are accessible.

There's a lot of debate over web components - whether or not they have a future, whether or not they're already dead, and etc. Framework zealots who love to use their React and Express and Angular and etc argue that web components have no use in websites these days, but the fact remains that with web components, websites can be built and loaded faster than any of their frameworks can do it in. Plus, every single major browser these days supports web components:

image

Plus, a ton of websites that I frequent use web components:

Google Codelabs (a huge site for guided coding tutorials made by Google)
image

Firebase (one of Google's most well known developer tools)
image

YouTube
image

.. and probably the rest of Google's websites as they get around to moving them over.

Capital One (shocking that a bank uses them)
image

Rotten Tomatos
image

Home Assistant
image

Suffice it to say, Web Components appear to be here to stay as many major websites across the internet adopt or maintain their usage of them.

Check out my video exploring how websites use web components:

https://youtu.be/bmnLuAjKwyQ

Tutorials on Web Components:

Google Codelabs

Top comments (0)