Web Components are a new browser feature that provides a standard component model for the Web — WICG/web-components
<my-element>Hello</my-element>A web native alternative to, eg. React and Vue.
Allow you to build encapsulated, reusable components
The underlying web standards are:
- Custom Elements
- Shadow DOM
- HTML Templates (
<template>)
- Based on web standards (so a safe bet in the long run)
- Usable directly in HTML (unlike JSX, which has to be compiled)
- Framework agnostic (you can build components that can be used with any UI framework)
- Can be used as a progressive enhancement
- Lightweight and performant (can avoid the need for loading a framework)
- Multiple
<slot>s per component - ie. not justchildren
Custom elements must have a dash in their name (eg. <my-component>)
Why? No native HTML element has (or will have) a dash in it, so this avoids the risk of name clashes with new HTML elements in future.
Yes.
- Github: "How we use Web Components at Github", May 2021
- Microsoft: FAST design system
- Salesforce: Lightning Web Components
- The Guardian:
<gu-island> - Eleventy: WebC /
<is-land>
...etc.
What is a Custom Element?
What is an HTML template?
What is Shadow DOM?
What is Declarative Shadow DOM?