DEV Community

kevinhughes1335
kevinhughes1335

Posted on

Web Components are the Future

Introduction: What are Web Components?

Didn't you read the title? Web Components are the future. They're basically technologies used to create reusable custom elements. They're kind of like plugins, but for web development rather than software. Web Components can be used with any JavaScript library or framework that works with HTML.

Web Components are based on four major specifications:

  • Custom Elements: Foundation for designing new DOM elements.
  • Shadow DOM: Defines how to use encapsulated style and markup in Web Components.
  • ES Modules: Defines inclusion and reuse of JS docs.
  • HTML Templates: Handles instantiation of fragments of markup for later use.

So why are Web Components "The Future"?

Improved Accessibility

Accessibility is crucial in web development. If your application is not widely accessible to anyone and everyone, you're doing something wrong. Creating and using custom elements can allow you to tailor your application to account for all users. Using a custom element is extremely simple. All you need to do is import it and use the new tags in an HTML document. So once you've made an element (or someone else has publicly), it's just about as easy as copying and pasting. Compared to writing an entire web page from scratch, importing a Web Component is MUCH easier and faster, and it makes it more widely accessible to everyone.

Future Proof

As hardware and software change, older methods often get left in the past. Web Components will stand the test of time for one major reason: they are adaptable. At their core, Web Components are literally made for serving multiple purposes. Compared to frameworks, which change frequently and render older versions useless, Web Components can be easily altered at any moment to fit the current situation.

Who's using Web Components?

A lot of big names, actually.
Heard of Google?
image

How about EA?
image

What about YouTube?
image

Watch this video if you'd like to see me show how these sites implement Web Components:
https://youtu.be/lFVY6qh7yQI

If you're interested in where I'm getting this information, hit these links (Because I sure as hell didn't figure all this out on my own)
https://www.webcomponents.org/
https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85

Top comments (0)