To Web Component, or to not?

What are Web components?

Web components are actually a set of web platform API's that "allow you to create reusable, custom, encapsulated HTML tag to use in web pages and web apps" (Introduction, webcomponents.org). This was created to make it much easier to reuse the same codes when designing and creating websites.This also makes the code for the website nice and neat, and not a complete mess to read or fix. This also allows for large companies to create tags that can help expand their website.

There are actually four main specifications of web components that are used in many websites. The four specifications are:

Custom Elements: Custom Elements lays the foundation to use other types of specifications such as DOM elements
DOM elements: Defines a website how to use encapsulated styles and markups
ES Modules: Helps define the inclusion and reuse of JS document in a standard based, modular, performant way
HTML Template: defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.

(Definitions of these specifications taken from: https://www.webcomponents.org/introduction)

So why should large companies use web components for their website?

The answer is simple: Web components improve accessibility, helps future proof development and improves transparency.

Accessibility

Web components are very accessible in the grand scheme of things. As of today, they basically work just about anywhere. Not only that, but many developers and coders are comfortable with them now. This comes with the next point, which is they are also easy to customize. Being able to customize web components allows for more uses and less difficulty.

Another way that web components are super accessible (and why they should be used) is because they are uspoorted with any JavaScript library that works with HTML. Since JavaScript is the gold standard for website libraries, it is a no brainer of why everyone uses web components.

Future Proof

They say over 89% of the web is powered using web components. With a high percentage like this, it's easy to see that web components are the standard moving forward. As I mentioned earlier, web components use all JavaScript libraries. By using web components, you ensure that all the libraries to come with Javascript will be supported. Also, web components are not dependent on front end frameworks. In the world of ever changing frameworks, large business will not have to worry about waking up the next day to a new standard.

Examples of web components in action:

Youtube uses these components to help show a preview of the video:

Michigan State basketball uses examples to show the twitter feed of the team:

Finally, Ubisoft gives us a great example with the "Carousel component":

I hope the definitions and examples I used help to make sense of web components, I have also made a video explaining this topic if you prefer a video explanation: https://www.youtube.com/watch?v=frNyl6z2fiU

Helpful links and information (As well as works cited):