We can create lightning components using two programming models:

1.     Aura

2.     LWC

LWC uses Web components standards and provides what over and above is required to perform well on browsers.

With time, web standards have evolved a lot and browser vendors have implemented them in form native browser APIs and considering LWC is built on code natively running on browsers makes it more lightweight and delivers exceptional performance as compared to AURA.

If you take a look at the below figure you will notice how in the LWC programming model almost everything is coming from native APIs implemented by browsers. While in the AURA programming model, we had to implement a lot of proprietary components, modules, etc to make the framework work.

The next question that comes to mind is what are web components exactly?

In simple words, web components are a suite of different features allowing you to create new custom HTML tags (custom elements) which can be re-used multiple times on any web page while making sure the functionality of each custom element is encapsulated from each other

There are 3 main pillars of Web components.

1. Custom Elements :

These are nothing but simply user-defined HTML elements which we can use on our HTML page as we would any other standard element.

In vanilla JS we can create a custom element of our own by  creating a class that extends HTMLElement and further defining it using CusomElements.define(‘component-name’, className);

While in the case of the LWC framework automatically takes care of it for us.

2. Shadow DOM: 

It helps us to encapsulate our component structure and style so that nothing leaks out to or seeps into/from the main DOM.

Salesforce created synthetic shadow DOM to implement this web API few browsers that don’t support native Shadow DOM.

3. Templates: 

It’s an HTML element for holding HTML which is not rendered automatically on load and rather is rendered when certain criteria are met.

Note: All the boilerplate code required in vanilla JS is avoided in LWC (framework takes care of it all)