After some time working with LWC, I’ve realised how enlightening is to understand what web components standards are about, how you build web components in vanilla JavaScript (plain JavaScript), and what LWC does for you, to help you create web components easily.
This is a step that some developers skip (I skipped it myself at the beginning of my learning path), just because you try to learn LWC straight away. Understanding the basics (not only for web components, but for any other topic) makes you consolidate your knowledge on top of a solid base. This definitely expands your ability to work with the subject in question and your expertise about the topic.
That’s why I decided to create two quick takes, in which I explain the three standards in which web components are based: Shadow DOM, Custom Elements and HTML Templates. I explain how you create web components following these standards using vanilla JavaScript, and then we do the same with LWC, to understand what the framework does automatically behind the scenes. Here you have the videos, hope that you enjoy them!
UPDATE: Take a look at a longer explanation of how Shadow DOM & CSS behave in LWC in the next video (English & Spanish version):
My Salesforce adventure 
Leave a Reply