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
- Custom Element
- Shadow DOM
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.
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.
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.