Web Component in HTML 5


Before going to understand the Lightning Web Component, we need to focus on some basic features of Web Component introduced at the part of HTML 5. Web Components provide standard component model for the Web and allow encapsulation of standard DOM Tree in HTML. We can encapsulate and create our own APIs, elements in web component.  Following are the primary features provided by Web Component such as

  • HTML Templates: It’s not rendered by default until it’s instantiated from JavaScript.
  • Custom Elements: Own Tags or APIs can be created to describe new HTML elements.
  • Shadow DOM: Encapsulated the main DOM of the HTML.
  • HTML Import/ Export: Able to import or export any HTML files in the main HTML file.

We will learn one by one in the next sessions.

Why Web Component? 

  • We can reuse the elements in the application by import/export mechanism. That means, Web Component increases re-usability of elements in Web Applications.
  • Web Component depends on modular based. So, maintainability is much easier than normal HTML component.
  • We can define APIs by using Custom Element to enhance the productivity as per business.
  • Web Component can extend the existing browser elements to maintain the browser’s accessibility.
  • You can encapsulate the main DOM tree to avoid the same styling for all similar classes.

Browser Support

Web Components are supported in almost all modern browsers now. However, Web Component is best suited for Google Chrome and Opera browser.


Are you excited to learn? right?

Hold on…be prepare with paper and pen…

Let’s start our journey……  

10,242 total views, 3 views today

Rating: 4.9/5. From 15 votes.
Please wait...
This entry was posted in Lightning Web Component. Bookmark the permalink.

Leave a Reply