DEV Community

UIXKinguin
UIXKinguin

Posted on

Why You Should Use Web Components

What is a web-component?

It's quite literally what it sounds like, a component that's on the web!...That's not exactly the whole gist of it but essentially its a block of code that works pretty much anywhere because of the fact that certain web standards pertaining to web-components have finally been met.

Around 2018-2019 Era of WebDev all 5 Major Browsers (Chrome, Firefox, Edge, Safari, and Opera) all came to a consensus on the web-standards surrounding web-components allowing for an increased modularity of code.

WC are essentially lego bricks that you can put into any build on the web and just have them fit. They don't run on frameworks or libraries, so no installations are required. Nor does it's functionality change due to the platform its on. ah the bliss of using vanillajs am I right?

WCs use Custom Elements and Shadow DOM and HTML Template in tandem to create some of the most creative modular code blocks we've seen in WebDev history.
Here's a short list of super convenient WCs:

  1. A video player with a built in transcript scanner
  2. A midi to sheet-music converter
  3. to-do lists
  4. Gallery Carousels
  5. Anything you can come up with?

Some of the benefits of using WCs:

  1. They can be deployed in any environment
  2. They are modular and reusable infinitely
  3. Versatile and Flexible
  4. Communities can share/ship components to be used elsewhere

So what are you waiting for? Get out there and make some Web-Components!

Here are some extra links to help you get going.
https://www.webcomponents.org/
https://developer.mozilla.org/en-US/docs/Web/Web_Components

Shameless plug:
https://youtu.be/_ZG1Jh3CDRs

Top comments (0)