In this blog post we will learn about Lightning Web Components. These days browsers have become so powerful and advance that there is no need for any Javascript libraries. There was time when web developers were dependent heavily on frameworks like JQuery,Angular or React. Similary in case of Salesforce,we had aura frameworks in 2014.
In last 5 years, web browsers have developed so much that there is no longer the need of revisiting these frameworks. Web browser are taking care of most of the work.
Since the web browser has evolved, Salesforce has introduced Lightning Web Components. It is more lightweight and powerful. It uses the native browser functionalities as much as possible.
In this blog post, we will cover the native browser capabilities and also the new browser capabilities. Out of all the features,the most important feature of modern browser is that they support web component.
Below are the 4 building blocks of Web Components:
1) Templates
2) Custom Element
3) Shadow DOM
4) Imports
We will go through each of these building blocks one by one.
1) Templates: It allow us to write markup inside <template> tag. This tag is not rendered on browser. This is very powerful tag and it is part of HTML5 specification.This tag is used to define how the content will be shown and formatted.
Same <template> tag can be reused throughout the whole page.
2) Custom Element: The Second building block of web component is Custom Element. We can create a custom HTML tag. Custom element might also extend class HTMLElement. We also need to use window.customElements.define method to let browser know which one is custom element. There are also life cycle methods like connectedCallback and disconnectedCallback in custom element if you want to perform some operations on those events.
3) Shadow DOM : Another important part of HTML Web component is Shadow DOM. With the help of Shadow DOM, we can encapsulate structure and style from other elements. Shadow DOM can have various style without effecting style of other elements. We do not need to use different CSS classes for same element if we want to encapsulate.
4) Import
Most basic building block in web page is the use of hacks or iframe. As part of web components, we have the ability to import another HTML page using the link tag.
To Learn more