What are Web Components
The World Wide Web Consortium (W3C), also known as the organization that founded the internet as we know it today, developed this method in 2012 to standardize all of the web´s foundational technologies.
Why use Web Components?
However, it’s not all good news because developers frequently need to use the same components in different projects using different frameworks or libraries. They are consequently compelled to rewrite those parts with duplicate code. This poses a difficulty in terms of maintainability because the developer must make these changes as many times as the component has been replicated in order to address potential issues and integrate new functionalities or adjustments.
There is also another case in which the use of web components can be interesting. Let’s say that a company has a strong corporate image but uses different platforms or web tools. It can be difficult to unify the style of buttons or other elements with the same design. With the web components approach, designers can create a collection of pieces that match the corporate image, and developers just need to implement it once, thanks to the shared catalog of parts.
Web Components Specifications
Web Components are based on four main specifications, as explained below:
Custom elements are a set of APIs that allow the developer to create new HTML tags. You can define the behavior and how it should be created at a visual level. There are two types of Custom elements:
- Autonomous custom elements: used to create completely new HTML elements.
- Customized built-in element: used to extend existing HTML elements or other web components.
<script/> were used, and later other ways to define modules appeared, such as CommonJS, but none of them became standardized.
This system initially creates an empty template so that it does not interfere with the rest of the application and only renders the content of that template when it is required, thus again ensuring good performance.
The compatibility of web components is very wide. All Evergreen browsers (Chrome, Firefox, and Edge) support it without any problem. They have support for all APIs (custom elements, HTML templates, shadow DOM, and ES modules).
Although the compatibility is wide, there are some exceptions, such as Internet Explorer and Safari. In the case of Internet Explorer, the incompatibility is due to its closure by Microsoft, which will remove access on February 14, 2023. As for Safari, there are certain functionalities that are compatible and others that are not. The autonomous custom elements that have been explained above are 100% compatible with Safari. However, the shadow DOM has not yet been implemented, and after a 2013 debate between Google and Apple engineers, it was decided that customized built-in elements were not going to be implemented either.
Challenges of Web Components
Web components have faced different challenges to find their place and make their implementation worthwhile. They have evolved a lot; however, there is still room for improvement.
Integration with general styles
How to handle the overwriting of general styles in the application is one of the challenges that web components have faced and for which they currently have somewhat complex solutions. For this, there are several options:
- Do not use Shadow DOM: You can add the styles directly to the custom element, although this leaves the code open for some script to accidentally or maliciously change it.
- Use the: host class: This class allows you to select a custom element from the shadow DOM and style it in a specific way.
- Using CSS custom properties: The Custom properties or variables are connected in cascade in the Web Components, therefore if your element uses a variable you can define it inside_:root_ and it will be able to be used without problem.
- Using shadow parts: With the new :part selector you can access a part of a shadow tree. Therefore this new method allows you to style a specific part of a custom element.
Top comments (0)