Web Components or Custom Elements

In short:

• We all know the HTML elements like header elements (h1, h2, etc.), content elements (div, p, span, etc.).
• To create a custom element(Web Component), per say, my-custom-element, you need to follow the steps as below:
• Create a class that extends the HTMLElement.
• Add the structure, style, and behavior to the class.
• Add the life cycle to the custom element depending on the need.
• Attach a shadow DOM tree to the custom element.
• Define it in window.customElements.
• Use libraries like Stencil to build the web components in a breeze.

I started reading about Web Components from a layman level. 

Initially I went through the fundamentals of Web Components here: https://www.webcomponents.org/introduction

Then I read about window.customElements.define here: https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements

Then I went through the examples and the details given here: https://www.robinwieruch.de/web-components-tutorial.

Also, to make your hands dirty:

This is the best (short and sweet): https://www.youtube.com/watch?v=mTNdTcwK3MM

try Stencil and build a stop-watch (a library to build your web component project) :  https://medium.com/@ahsan.ayaz/building-web-components-with-stencil-a3717787954a

Handling data with Web Components: https://itnext.io/handling-data-with-web-components-9e7e4a452e6e

Well, I ended up with some understanding after going through these articles. Happy coding 😊

Additional read: Thorough coverage on Stencil props, events, state: https://blog.logrocket.com/building-reusable-web-components-with-stencil-js/

Data binding example with NO stencil: https://medium.com/swlh/https-medium-com-drmoerkerke-data-binding-for-web-components-in-just-a-few-lines-of-code-33f0a46943b3