Modern browsers have become so advanced and powerful that there is almost no or minimal need of Javascript libraries these days. There was time when web developers rely heavily on frameworks like JQuery, Angular or React. Same for Salesforce, when it launched Aura framework in 2014.
In last 5 years, web browsers have evolved so much that we need to revisit and check ourselves that do we really need libraries or frameworks for every small functionalities ? Considering rich feature set browsers, Salesforce already revisited aura framework and decided that it’s time to make it more lightweight and use native browser capabilities as much as possible. Welcome Lightning Web Components !!! Before we jump into ocean of Lightning Web Components, it’s important to understand what is supported by browsers natively ? Out of many features supported by modern browsers, one of most important one is Web Component.
Below are 4 pillars of Web Components
- Templates
- Custom Element
- Shadow DOM
- Imports
1. Templates
It allows writing markup inside <template> tag which is not rendered on browser. This is pretty powerful tag and part of HTML 5 specification. It is used to define how content would be displayed & formatted. Same <template> tag can be reused throughout the document. In below example, I have a JSON object with list of movies. If I need to display movie list with name and description, template can be used to achieve this. If you notice in html code of <template, Movie Name and Description, placeholders are not displayed on browser. Read more about Templates here.
2. Custom Element
Above example of displaying movie list can also be accomplished by second pillar of Web Component which is Custom Element. We can create a custom HTML tag named movie-card with name and detail attribute. It will give similar output as of example 1 where we used Template. Let’s not get confused on what should we use, Template vs Custom Element. All I want to show is how Custom Element of Web Component can be used.
As shown in above example, Javascript file. Custom Element must extend class HTMLElement. For every attribute, in our case name and detail should have getter and setter methods. We need to use window.customElements.define method to let browser know which one is custom element. Also, there are some Life Cycle methods like connectedCallback and disconnectedCallback in custom element if want to perform some operations on those events. Read more about Custom Elements here.
3. Shadow DOM
Another important aspect of HTML Web Component is Shadow DOM. Using Shadow DOM, we can encapsulate structure and style from other elements. Shadow DOM can have different style without impacting style of other elements. In below example, paragraph tag of main body has red color however paragraph tag of shadow dom is blue. We don’t need to use separate CSS classes for same element if we want to encapsulate them.
To declare any custom Element as shadow DOM, we need to call method attachShadow as shown in above javascript. Read more about Shadow DOM here.
4. Import
How do you import Javascript and CSS in HTML ? Using Link or Script.. What is basic building block on any web page ? its HTML. And do you import it if needed ? Think about it.. iframe ? AJAX ?
So, most basic building block in web page is on mercy of hacks or iframe, no straight way. As part of web components, we can import another HTML page just with link tag as shown below
<head>
<link rel="import" href="/path/to/imports/somePage.html">
</head>
You can read more about import here on Eric’s post.
Leave a Reply to NaveenCancel reply