Introduction

Web Components is a suite of different technologies allowing you to create reusable custom elements with their functionality encapsulated away from the rest of your code and utilize them in your web apps.

Web Components consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be 33reused wherever you like without fear of code collisions.

1. Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.

2. Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.

3. HTML templates: The and elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.

Lifecycle callbacks

1. connectedCallback: Invoked when the custom element is first connected to the document's DOM.

2. disconnectedCallback: Invoked when the custom element is disconnected from the document's DOM.

3. adoptedCallback: Invoked when the custom element is moved to a new document.

4. attributeChangedCallback: Invoked when one of the custom element's attributes is added, removed, or changed.

Why companies adapt web components

Companies adapt Web components to create a custom framework instead of sticking with well grown and known open source frameworks or libraries like Angular, Vue or React respectively. Mostly well established firms are the ones like to Adapt the web components to create custom frameworks since there will be more inhouse development to create many number of applications. Shared components are the building blocks for creating a reusable application. The concept of shared components is similar to plugin where we can reuse the components to customize on top based on needs. Example: Input form components like text, radio, textarea, Validations for forms like custom Jsonschema, Utils, e.t.c.,

Web components vs Open source frameworks/libraries

Unlike traditional opensource framework / libraries web components too need a depth understanding before we can master it in terms of designing.

Web Components:

1. It is a set of different technologies that allow us to create reusable and isolated elements.
2. Types of components include custom elements, shadow DOM, and templates.
3. No state management.
4. Interoperable.
5. CSS can be scoped using shadow DOMs.
6. You have to implement data binding yourself.
7. The ecosystem is not as vast as React’s ecosystem.

Open Source Frameworks/Libraries: (React)

1. It is a JavaScript library for building UI interfaces for single-page applications.
2. Types of components include functional and class.
3. Component re-rendering based on state changes.
4. Components are reusable in React only.
5. No local styling.
6. React provides a unidirectional data flow pattern.
7. Its ecosystem is incredibly vast and powerful. It has a large community and forever growing tools and libraries.

Conclusion

Advantage:

1. Can create custom frameworks in JavaScript
2. No need to bound to a open source framework / libraries
3. Developer can understand the core concepts of JavaScript and Frameworks
4. Reusable custom components will help to speedup the development
5. Regular Upgrade may not be needed

Disadvantage:

1. Takes time to set the base and construct the shared components
2. Deep learning curve
3. All modern developers may not be familiarized and it's hard to find a replacement resource

Source / Credit / References:

1. developer.mozilla.org/en-US/docs/Web/Web_Co..
2. blog.logrocket.com/react-vs-web-components