Web Components

What is a a web component?

Web Components are features that provide a standard component model for the web. In other words, this is something that can be written and then inserted into whatever one is working on. These different bits of UI are important for many reasons. This can be different themes, buttons, widgets, and almost any kind of design.

Recently web components have been altered to have a set of four browser standards. All major vendors have adopted these standards. Pretty much anywhere HTML loads so do web components.

So what are the four standards?

Elements

• This is a way to hold custom HTML tags
• These need to be cloned by the JavaScript
• One can reuse them as many times once it is used once

Custom elements

• These allow you to register a new HTML tag
• These can be used instead of the and tags
• Instead you can use a string for the name and are defined as a JavaScript class
• All of these must contain a dash
• All custom elements have their own custom attributes

Shadow DOM

• Shadow DOM is a way to keep all of the CSS rules the same
• This is important when working as a team
• Shadow DOM isolates DOM nodes
• It makes the web components self-contained.

JavaScript Modules

• These pull together the other three standards
• It makes all of the elements to function and be completed
• These can only strictly be used in the specific module unless exported otherwise

Let's talk web

So what is actually the point of these web components? Well there are a few answers to this. First off, these improve accessibility tremendously. It lets the company design their site however they desire. By having this opportunity, it is on them to decide how accessible they make it. The more accessible the site is, the higher the usability.

These also help improve the future proof development and improve transparency. As stated above, once you create the four different elements, one can continue to use them down the stretch. The components can be used anywhere regular elements are used. Everyone uses these components already. They have become the web standard.

Benny Powers says all of this information best. I would one hundred percent recommend checking out this page to learn more about web components.

All big business use web components. All small business use web components. If you are on a web site that uses HTML, it uses web components. For example, companies like Google, GitHub, EA, and Mozilla all use them.

Web components are EVERYWHERE!!!

For more information about web components, check out my YouTube video below!

Learning Web Components