Why Web Components
- It is set of web platform APIs and technologies; it allows user to create reusable custom HTML element with own functionality
- Reusable components with plain HTML, CSS, JavaScript
- Based on official web standards
- No framework needed
- Supported in all evergreen browsers
- We can write strongly encapsulated custom elements to use everywhere.
- Web Components enable us to develop entirely independently of front-end frameworks.
How Do The Web Components Look Like
<hello-world></hello-world>
Example Of Lit-Web Components:
import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
@customElement('my-element')
export class SimpleGreeting extends LitElement {
static styles = css`p { color: blue }`;
@property()
name = 'welcome lit-web components';
render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}
Why Build A Design System Using Web Components:
- Easy to customize
- Framework independent
- Supported by browsers
- Accessibility
- Encapsulation
Because of web components are a standardized way to create reusable UI elements that work
across different frameworks and libraries.
Who’s Working On Web Components Right Now?
Microsoft is pushing Web Components forward with fast user Interface, a component library built with Web Components. They not only provide you with basic building blocks but there is also a full design system behind it.
Adobe has released its own library called Spectrum web components built on top of Lit Element which is a lightweight framework used to build web components. They’ve released their entire design system using web components.