Web Components Galore

What's a Web Component?

Web Components are a suite of different technologies that allow you to create reusable custom elements that have their functionality encapsulated away from the rest of your code. Reusing code as much as possible is a good idea as a developer. Writing the same complex code over and over again can quickly clutter your page and make it nearly unreadable.

Web components aim to solve this issue by allowing users to create versatile custom elements with encapsulated functionality that can be reused wherever necessary without the fear of code collisions.
Creating a web component is similar to other types of programming. You begin by creating a class in which you specify your web components functionality, register your new custom element by calling the method and passing in the element to be defined, attach a shadow DOM or an HTML template if necessary, and use your custom element as needed.

Why Use a Web Component?

At the start of the web, the internet had a small set of tags. These were used to build web pages out of tags, and most everything was written in markup. Today, things are a little different. Web components are standard in over 89% of all internet traffic without the need for heavy and bloated tech layers. It is easy to find HTML and CSS blocks that someone else made for you to copy and paste into your web pages. This does sometimes lead to some obstacles when reusing components from different frameworks.

Web components allow us to extend HTML so that we can fill in the gaps in functionality with our own tags. They are an umbrella term for four different W3C specifications:

Custom Elements – Lets you define your own HTML tabs
HTML Templates – Enables you to define blocks of markup with the ability to inject dynamic content into
Shadow DOM – Gives you the ability to scope markup and styles in a separate DOM tree
HTML Imports – Provides a way to include and reuse HTML documents in other HTML documents

Combined, this package gives you:

Composability – Being able to create whole sites and apps by putting different elements together
Encapsulation – Isolating markup, style, and behavior logic so they don’t leak into the rest of the page
Reusability – Extending existing elements to create new elements, allowing you to stop “reinventing the wheel”

How do Web Components Improve Accessibility?

Custom Elements allow users to create a variant of an element to make is suit their needs.
- Have customized built-in elements (takes an existing HTML element and extends its capability) and autonomous elements (created more or less from scratch)
Accessibility Object Model – an experimental JavaScript API being incubated at W3C by Google, Apple, and Mozilla.
- Has several new features intended to solve existing accessibility use cases

How do Web Components help Future Proof Development/Improve Transparency

They free us from the frequently changing front-end frameworks by taking advantage of standards that all browser vendors have agreed on implementing
No longer dependent on a specific front-end framework (like Angular, React, or Vue)
Gives developers the freedom to use any JavaScript frameworks and building & testing tools