JavaScript

The anatomy of Web Components

Component-based frontend architecture is a new fashion in web development. React does it, Angular does it and so other trending frameworks. It provides flexibility to reuse shared components. Let’s learn about Web Components which is a built-in mechanism in the browser to create custom components.

(source: pexels.com)

If you are coming from React or Angular background, then you very well know what a component is. A component in nutshell is a box whose job is to print something on the screen or provide some functionality or both, without affecting other parts of our application unintentionally.

This box contains the jargons to render a useful view on the screen or provide some interactive/non-interactive functionality. But the given condition is that enclosed CSS and JavaScript in this box must not affect the other parts of our application unless it is to do so intentionally.

Here are few requirements for a web component

1. A web component must be a custom HTML element.
2. A web component should contain all the logic to function itself.
3. A web component…