DEV Community

loading...

Intro to Web Components

intuitive-tech
・2 min read

What Is a Web Component?

In simple terms, a web component is a piece of code that allows you to create custom elements in a website. These components are reusable and can be placed anywhere in websites or apps as they're needed. Why is this important? Well, it allows for developers to spend less time coding the same things over and over again that they're going to use in a website anyway. Not only are web components great for usability, they allow for a website to have a uniform functionality and to be dynamic with all different types of data.

Examples of Web Components

Even if you've never heard the term before, chances are you've already used some web components just through browsing the internet. YouTube, one of the world's most popular websites, uses web components all throughout the website. If you go to the homepage, you'll see a number of components. Specifically, each of the video thumbnails and the data associated with it is displayed using a web component made by youtube. It's nothing fancy, but it allows for reusability all throughout the website in addition to uniformity.

Why Should I Use Them?

Like I mentioned above, one of the greatest strengths of using web components is for reusability. It makes life a whole heck of a lot easier for a developer to make one component and implement it all throughout their website as opposed to having to rewrite the same couple lines of code continuously. Also, in the case of YouTube, it allows for data to be displayed in a uniform way. One of the biggest strengths of web components is their open-source capability. This makes it so that anyone is able to work on a web component that has already been create and make their own version of it or make some type of improvements.

Below are some of the websites I found that are currently using web components to build their site:
YouTube
Wayback Machine
EA

Click here for a video explanation of web components!

Discussion (0)

Forem Open with the Forem app