What are web components? and types of web components
In this article, We will see what are web components,
In modern web development, today pretty much everyone using components to encapsulate their UI functionality, Web components allows us to extend the browser with new components
What are Web components:
- Low-level browser API’s
- Standard component interface
- Flexible implementation
Definition from https://www.webcomponents.org/introduction
Basically, Web components are 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, work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
Web Components aim to change the way we build web applications by allowing developers to extend the HTML vocabulary by creating their own reusable HTML elements.
Types of Web components:
- Custom Elements:
These are fully valid HTML elements with custom templates, behaviors, and tag names (e.g. <dialog>) made with a set of JavaScript APIs. Custom Elements are defined in the HTML Living Standard specification.
Below code pen link for basic custom element
2.Shadow DOM:
(Definition from the developer Mozilla) An important aspect of web components is encapsulation, and able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash,
- Isolated DOM: A component’s DOM is self-contained (e.g.
document.querySelector()won’t return nodes in the component’s shadow DOM). This also simplifies the CSS selectors across your web app since DOM components are isolated, and it gives you the ability to use more generic id/class names without worrying about naming conflicts. - Scoped CSS: CSS defined inside shadow DOM is scoped to it. Style rules don’t leak out and page styles don’t interfere with it.
- Composition: Design a declarative, markup-based API for your component.
The above features are provided by shadow dom, let's see the code for shadow dom,
3.HTML Template
User-defined templates in HTML that aren’t rendered until called upon, fragments of markup that go unused at page load, but can be instantiated later on at runtime.
The <template> tag is defined in the HTML Living Standard specification.
We can implement reusable HTML structure using <template> and <slot> elements,
Refer to below sites for learning about web components:
Libraries for Implementing web Components
Popular sites are using Web components:
- Youtube
- Github
- Google news
- Ionic Framework
- wired Js
Enterprise applications like Salesforce are using web components.
The main advantage of web component does not depend on any framework like React or Angular, So they can be reusable wherever javascript runs, platforms like (ReactJs, React Native, Flutter, Electron….etc )
Thanks for Reading….!!!
