Since LWC has come into existence, we can now create Lightning components in the following ways:
Aura components – which are also known as lightning components.
Lightning Web Components- the newest and advanced way to create lightning components.
There are four key concepts to understand the web components that are as explained below.
The Custom Elements API allows us to create our own DOM elements. Using this API, we can define a custom element, and inform the parser how to construct that element properly and how elements of that class should react to changes. Now you can create your own HTML element.
Shadow DOM gives us a way to encapsulate the styling and markup of our components. It's a sub DOM tree attached to a DOM element, to make sure none of our stylings leaks out or gets overwritten by any external styles. It provides great modularity.
The ES Modules specification defines the inclusion and reuse of JS documents in a standards-based, modular, performant way.
<template> tag allows us to write reusable chunks of DOM. Inside a template, scripts don't run, images don't load, and styling/mark up is not rendered. A template tag itself is not even considered to be in the document until it's activated. HTML templates are great because, for every instance of our element, only one template is used.