Web components began in 2010-2011 and were first created by Google researchers. Since then web components are one of the most successful new browser features in recent history.
Table Of Contents
1. Intro to Web Components
2. Web Components in Business
3. Resources
Intro to Web Components
Web components are defined as:
"A set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML."
-WebComponents
Web components are comprised of four parts:
Custom Elements
Custom elements allow web developers to create new HTML tags and define their own elements. Examples of custom elements include <div> or <article>. With custom elements, you make your own element with a custom name, but must have a dash in it such as <basic-button> or <profile-form>.
Shadow DOM
First, what is DOM?
Document object model (DOM) has an API that can be used by applications to manipulate the document's structure, content, and styling. When a page is loaded, the HTML is converted to a data model of "objects", "nodes", and a "DOM tree" which is where the structure of the webpage is stored. Basically, the DOM is a JavaScript representation of the HTML structure.
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.
ES Modules
"ES Modules enable web components to be developed in a modular way that is in alignment with other industry-accepted implementations for JavaScript application development. You can define the interface of your custom element in a JS file which is then included with a type="module" attribute." -WebComponents
HTML Template
The HTML template is a specialized DOM element <template> and <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.
Web Components in Business
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.
Top comments (0)