What are web components and why should you care?
web components are building blocks of the web which refer to a set of four browser standards that work together to create reusable, custom, encapsulated HTML tags which can be used in web pages and web apps.
From a technical perspective, web components comprise of:
- < template > elements allow developers to quickly reuse portions of the DOM
- custom elements connect JavaScript to custom HTML tags, enabling developers to create their HTML elements
- shadow DOM encapsulates style and markup in the web components, making them self-contained
- JavaScript modules package and publish the components
For more details on the technical aspects of web components check out this article by Benny Powers.
As can be seen in the graph from chrome metrics below, approximately 10% of all page loads today use web components. According to Arthur Evans, this makes them one of the most successful web platform features shipped in the last five years.
What are the benefits for large companies?
Web Standards Future-Proof Development
Web components are standardized, they are built on pre-determined web standards. Especially, when it comes to thinking long-term, cleaner, standardized and more semantic markup allows for increased accessibility and easier maintainability.
For example, if a new developer is hired to the team, he can easily and quickly read and understand a standardized code. Increasing their productivity, since less time is wasted learning company-specific coding jargon.
Interoperability Allows for Seamless Updates
An additional advantage of the standardized base of web components allows them to be natively supported in all browsers, mobile devices and desktops, as can been seen in the screenshot below.
This enables your team to seamlessly and efficiently introduce new functionalities on your web pages and web apps, as often as you want! With the certainty that the functionalities will run successfully on existing and legacy applications. Overall, cutting unnecessary costs of maintaining code.
Shadow DOM Self-Contains Web Components
Shadow DOM is what makes web components self-contained, in other word, isolates them from the rest of the code. This unique DOM and CSS scoping prevents CSS styles and element API from leaking out into the global scope. This plays a crucial role when editing specific components, adding them to or removing them from pages, etc. All of this can be done easily without worrying about affecting (or worst nightmare, breaking) other parts of the page or app. Enabling your teams to build and deploy projects much faster and at a lower cost.
Who is using web components?
The video below shows web components in action on the above websites.
Final Words
Web components are the future of web development. They are ideal for large organizations where a specialized team can make the best components (like Legos), and share them with the rest of the company, to give developers and users a consistently great experience. Overall, web components improve development efficiency and allow businesses to cut costs while reducing time to market.
Top comments (0)