What is a web component?
When we talk about a WebComponents, we are talking about a set of Web APIS, which together with different technologies (HTML, CSS and JavaScript) and always natively under web standards, allow you to create elements with a specific purpose in a fully customizable way, reusable and extendable.
Important features of Web Components
1. Custom Elements
2. HTML Templates
3. Shadow DOM
4. ES Modules
5. CSS Scopes & Parts
Custom Elements
They are a set of Web APIS that allow you to define custom HTML elements. Just as the HTML5 standard defines that official HTML tags must consist of a single word, custom elements must consist of at least two words separated by a hyphen.
HTML Templates
They allow you to create code fragments isolated from the document, its content will be inert and will not be processed or rendered until we clone its content
Shadow DOM
It allows you to attach hidden DOMs within the regular DOM, making it possible to encapsulate and isolate elements from the rest of the page.
ES Modules
It´s a native feature that allows the import and export of data fragments between different JavaScript files.
CSS Scopes & Parts
Although CSS works globally by default, we have specific pseudoclasses and pseudoelements in addition to the “CSS Parts” to expose parts of our component to the outside and style them.
Advantages of web components
- They follow web standards so they work in any current browser.
- Its implementation is native so we do not depend on third-party frameworks or libraries.
- They are reusable, extensible and allow us to create fully encapsulated elements.
- Currently you can implement them in almost all the most popular Frameworks. Check it
Links
These are some of the documentation in Spanish and English that I consider to be a reference.
Top comments (0)