DEV Community

solveyourstrife
solveyourstrife

Posted on

But for real, what are web components?

If you are here, I am just going to assume that you do not know what web components are. Otherwise, why would you be reading this?

An easy, breezy, beautiful definition

Basically web components are a group of features that provide a standard model for the web, allowing encapsulation and interoperability of HTML elements. Easy right?

There are four browser standards that work together to compose the model:

  1. elements
  2. custom elements
  3. shadow DOM
  4. javascript modules

Read more into each of these here

Why utilize web components?

One of the biggest advantages of web components is that it is open source. Open source is when the source code for a software is free and available for all. It can from there be changed or redistributed.

Another great aspect of web components is that they are custom. With applications using so many different environments - from JavaScript, Python, or even HTML - web components are able to be used in all due to their functionality that is separated from the specific code.

They can make business devOps easier!

For developers when they are working on a website or framework and find themselves repeating components, web components can come in handy. Instead of creating the component every time, the web components allow for it to be created only once, and then shared across the company. These can include headers, footers, menus, and other web aspects that need to be continually reused.

Examples of real life web components being used

image
This image shows the web component for the header when you inspect the twitter home page. You can learn about that here.

image
Here is an example of an svg web component being used on YouTube. It basically lets the user define their own icons, and you can read more about it here.

image
A great place to find out about how you can utilize web components in Adobe is right on Adobe in the first place! This adobe site shows all of the open source code available for Adobe products.

If you would like a video to explain web components to you, check out this video!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️