Decomposing a Web UI, as shown in the previous section, seems quite natural and desirable. It is an effective approach that allows you to create, at the same time, well-structured UIs and reusable UI elements. Also, since a component is a generic concept, and you can create a new component by combining other components, you can consider a component, even your whole application. For years, developers have been looking for a way to autonomously extend the possibilities offered by HTML to create advanced UI elements. The result of their efforts has been libraries like jQuery UI, React, Angular, Vue, and similar. All these libraries provide ways to create UI elements following the component model. Many of these libraries are very popular, and each one proposes their approach to create UI components, and each one somehow tries to map UI elements to markup.
Anyway, they have a few drawbacks:
- They are not standard
- They are not natively supported by the browsers
- They are not interoperable
In other words, the UI component created with these libraries can be used only in projects supporting the same library. You cannot create a component with React and use it within an Angular application. If you want to create a UI element that can be used in a React application and an Angular application, you need to implement two versions of the element. Web Components try to overcome these drawbacks by allowing you to create UI elements by using standard technologies natively supported by the browsers.
Web Components are a set of standard specifications for creating custom HTML elements that can be reused in web pages and applications. The first mention of the principles of this technology dates back to 2011, during the session of Alex Russell at the Fronteers conference in Amsterdam. His proposal has been taken into account by the W3C that published the first Working Draft in 2012. Since then, the standardization process has introduced several variations to the original idea, so we got two different versions of the specifications over time, identified with v0 and v1. Currently, Web Components are no longer based on separate specifications but refer to the standards of HTML and Document Object Model (DOM), which they are now an integral part of.
Web Components lay on three standard features of web technologies:
Custom elements: They represent a set of JavaScript APIs for creating custom DOM elements associated with a specific HTML tag.
Shadow DOM: A set of JavaScript APIs that allow managing a specific DOM for a component, independent from the web page’s DOM.
HTML templates: It is an integration to the HTML specifications that allows you to define portions of markup that are not interpreted when the page is loading, but that are instantiated at runtime.
Thanks to Web Components technology, you can extend standard HTML elements to have a customized look and feel and behave. You can also create your HTML tag and use it on an HTML page as a standard element. You can do all this independently from the JavaScript library or framework you are using to build your application.
Hope this was helpful.
Top comments (0)