Web components are defined as:
Web components are comprised of four parts:
Custom elements allow web developers to create new HTML tags and define their own elements. Examples of custom elements include
<article>. With custom elements, you make your own element with a custom name, but must have a dash in it such as
First, what is DOM?
After learning what DOM is, we can get into what shadow DOM is. The shadow DOM defines how to use encapsulated style and markup in web components (Source: Ultimate Courses by Stefan Nieuwenhuis). Shadow DOM lets you place the children in a scoped subtree, so document-level CSS can't restyle the button by accident, for example. This subtree is called a shadow tree (Source: Polymer Library.
type="module" attribute." -WebComponents
The HTML template is a specialized DOM element
<slot> that allow you to create reusable base markup for a custom element with pieces that are overridable on a per-instance basis (Source: GrapeCity by Christian Gaetano). HTML templates allow us to create re-usable templates of code inside a normal HTML flow that won't be immediately rendered but can be used at a later time.
Many big companies like YouTube and GitHub are using web components. Additionally, many enterprises are also using web components, such as Salesforce. In fact, in 2019 it was reported that 8% of websites use some sort of web component. Web components have many benefits for big businesses like increasing efficiency and decreasing costs. Using web components help create new components without the fear of code collisions. Another feature is that the web components can be shared throughout the company and are easily accessible. No one wants to rewrite the same exact code over and over again, so this allows them to avoid doing that. This has cut the time it takes a product to be in customers' hands in half. Other pros of using web components are simplicity, customizable, and seamlessly interoperable. As you can see these functions are very useful for big businesses because they have a lot of customers to cater to. Their audience is very large so they will typically need a lot of content to share and produce. Using web components allows them to reduce the time being spent, as well as cut costs. Right now web components are still pretty new but I believe they will keep growing and be an essential element in a business.