Traditionally with custom markup structures like that of complex HTML, it has some limitations mentioned below –
- Lacks optimized rendering for continuous UI transformation,
- Lacks Standard UI and support for custom elements.
- No support for creating large, robust, and scalable apps on the client side.
Lightning Web Component
- Lightning Web Components(LWC) – a new methodology to build lightning components
- It’s lighter than any framework as it’s built on web standards and delivers exceptional performance that makes it ready to use without installing any framework or library.
- It is a programming model for building lightning components and can coexist with our Aura Components as well.
- It’s a complete package of technologies that lets you create and reuse custom elements. It is built using HTML and modern Javascript.
Key Concept
To have a more modern approach than the traditional one, LWC came to our rescue. It has some below-mentioned basic elements that make it more robust and exceptional when it comes to performance.
Fig: Lightning Web Component Model
- Custom Element
A set of Javascript APIs that allow you to create custom elements, by avoiding long and nested batches of elements. It simply has the ability to define your HTML element and its behavior and can be used on the user interface based on your requirement.
2. Shadow DOM
It’s a set of APIs that attach a Shadow DOM to a custom element in the same way as a normal DOM but a lot different. Shadow DOM is a DOM within DOM and can have its own markup and styling without affecting the host/parent DOM. So it doesn’t collide or override any other part in global reach.
3. HTML Templates
The <template> element allows you to encapsulate HTML and doesn’t render until intended so. They do not render immediately, or on the load of the page but get activated only when directed using JavaScript during runtime.
It is to be noted that at the time of onload the parser once for all processes all the contents of the <template> but that is only for validation purposes and instantiated only through JavaScript.
- It is useful for creating flexible templates.
- It also reduces the efforts of writing the same markup structures again and again.
4. ES Modules
These are simply JavaScript files. Lightning Web Components uses ES6 and greater modules and are more efficient.