So I think i understand web components...
Published: 2021-03-28 22:55:04

Before we get into why web components are the way of the future when it comes to UI components, I feel as if I should first define what Web Components are. If you're like me and go straight to Google to attempt to learn new things, let me save you some time: Wikipedia will tell you that they are "a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements." 
But after a much deeper level, Web Components are self-contained reusable bits of UI that can be inserted into apps or wherever you want once they're written. Common examples are buttons, widgets, and specific pull-quotes. 

From what I gather, all web components are made with 4 browser standards: 
< template > is a way to hold custom HTML tags and parse them once they are written so they can be reused as much as possible.

Custom Elements are a web standard that allows you to register a new HTML tag with some specific functionality. These are easily noticeable when looking at the page document because they are identifiable by their two parameters: a string for the name and a JS class to define behavior.

Shadow DOM is not a shady dude named Dom, but rather an API that essentially makes css styling a lot easier by making sure all components are styled consistently throughout an app once pasted in.

JavaScript Modules are what pulls everything all together, by allowing for complex apps composed of custom elements to function and be published.

Perhaps what I might be able to articulate better are some of the major benefits of Web components and why to use them:
The best place to start the discussion of the benefits of using web components is by talking about how web components improve a site's accessibility. When a site is able to improve accessibility it begins to enjoy improved mobile usability, uhhhh you think that's important today with everyone living on their mobile devices. Web components also take part in creating a better user experience, like I mentioned before, common examples of web components are widgets or buttons, assuring the functionality of these simple aspects of your site is crucial to the overall user experience. Sites also enjoy less liability with improved accessibility, with web accessibility lawsuits on the rise, time to cover your ass. Web components can also contribute to better SEO for your site by improving functionality and user experience, and we all know how important it is to be on top of the Google search result today.

A very natural question when learning about web components is "why should I use this?" and the answer to that question stems from the fact that web components are a web standard. This means that it must be accepted and respect by your web browser and your components are, therefore "future-proof" regardless of the implementation of framework choices you made.

One of the articles I read today provided a pretty cool example as to the type of developer team structure you could have when using web components, where separate developers can implement Web components on the same app without having to worry about complex inheritance chains, meaning you can have a developer to define the properties, events, and business logic, paired with a designer who takes care of the templates and styling. 

Many major corporations that use web components, such as Google, GitHub, and Salesforce who have become one of the leaders in cloud-based computing and providing enterprise application suites. In my video below I will attempt to show how sites like these use custom HTML tags on their web pages.

https://youtu.be/gGlyTuThAaE 

Attached here are also the 4 articles responsible for my base of "knowledge" on this topic:
https://dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85

https://dev.to/btopro/part-1-how-penn-state-unbundles-web-components-for-cdn-deployments-20di

https://www.accessiblemetrics.com/blog/6-benefits-of-web-accessibility/#:~:text=%206%20Benefits%20of%20Web%20Accessibility%20You%20Should,low%2C%20fonts%20are%20too%20small%2C%20menus...%20More%20

https://www.bing.com/search?q=web+components+and+future+proof+development&cvid=508caf4eb74d44f39bc721472d248230&aqs=edge..69i57.8498j0j9&FORM=ANAB01&PC=U531