ELI5: What Are Web Components?
Published: 2021-04-07 02:22:54

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iooeq5g0afcc4mmg1v9x.png)

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

Google Codelabs (a huge site for guided coding tutorials made by Google)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a61ylmizugprxlwf36s.png)

Firebase (one of Google's most well known developer tools)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no92wdiv06m7ouhcjz2c.png)

YouTube
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9v9fqfyih321ot7ynv07.png) 

.. 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2iqlng3g2em40p1n43ks.png)

Rotten Tomatos
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ih34xv9qex48grqgf6b1.png)

Home Assistant
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zh7g1k7kqaxzxwp3t1se.png) 

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](https://codelabs.developers.google.com/codelabs/mdc-101-web?hl=en#0)