What are Lightning web components?

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

This Post Has 10 Comments

  1. Eli Eagon

    You’re the best, I just found your blog and wanted to say that I’ve truly enjoyed browsing your blog posts. After all I’ll be subscribing to your feed and I hope you write again very soon!

  2. Randy Kody

    I like what you guys are up too. Such intelligent work and reporting! Carry on the excellent works guys I¡¦ve incorporated you guys to my blogroll. I think it’ll improve the value of my web site

  3. Guy Hanemann

    There is noticeably big money to comprehend this. I suppose you’ve made specific nice points in functions also.

  4. Shela Rigotti

    This movie literally is Star Trek from a parallel universe; a universe where humanity isn’t smart enough to get into the industrial revolution even if it hit them in the face.

  5. Alva Bineau

    There are incredibly plenty of details like that take into consideration. That is the fantastic specify raise up. I offer the thoughts above as general inspiration but clearly you can find questions such as the one you raise up where the most critical factor will probably be doing work in honest very good faith. I don?t know if guidelines have emerged about things like that, but More than likely that your particular job is clearly identified as a fair game. Both boys and girls notice the impact of a moment’s pleasure, for the rest of their lives.

  6. Natividad Dolby

    I appreciate, result in I discovered just what I was taking a look for. You’ve ended my four day long hunt! God Bless you man. Have a great day. Bye

  7. Thank you for the sensible critique. Me and my neighbor were just preparing to do a little research about this. We got a grab a book from our area library but I think I learned more clear from this post. I’m very glad to see such wonderful info being shared freely out there.

  8. There couple of interesting points at some point here but I don’t determine if every one of them center to heart. There exists some validity but I will take hold opinion until I consider it further. Good post , thanks and then we want more! Added onto FeedBurner in addition

Leave a Reply