Giters

zedix / awesome-web-components

A curated list of web components libraries and resources

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

awesome-listweb-componentsawesomeshadow-domwebcomponentscustom-elementsweb-standards

Awesome Web Components Awesome

This is a curated list of Web Components articles, design systems, libraries and resources.

Note

Write once, run anywhere

Note

Like any technology, they have their quirks and rough edges. But they are built into the browser and there are a lot of capabilities now, growing every year. — Rob Eisenberg

Latest Articles

Latest Talks

Latest Podcasts

Web Components: the native, interopable, component model of the web platform.

import sheet from './base.css' assert { type: 'css' };

class MyButton extends HTMLElement
{
  static observedAttributes = ['my-attr'];// tell the platform about reactive attributes
  #internals;
  #shadowRoot;

  constructor() {
    super();
    // custom construction logic such as creating your shadow DOM
    this.attachShadow({ mode: 'open'});
    this.#shadowRoot.adoptedStyleSheets = [sheet];
    // specify the default ARIA role
    this.#internals = this.attachInternals();
    this.#internals.ariaRole = 'button';
  }

  connectedCallback() {
    // this lifecycle hook is called by the platform when your
    // element is connected to the DOM
  }

  disconnectedCallback() {
    // this lifecycle hook is called by the platform when your
    // element is disconnected from the DOM
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // this lifecycle hook is called whenever one of your
    // observed attributes changes in value
  }
}

customElements.define('my-element', MyButton);
  • Web Components are the native component model on the web platform.
  • Web Components exposes capabilities previously reserved for native code
  • Web Components are low level DOM APIs

Performance

From About Web Components by Rob Eisenberg

Web Components have clear performance benefits. There are several reasons for this:

  • The core capabilities of Web Components are implemented in C++/Rust as part of each browser’s native HTML parser and runtime. JavaScript frameworks simply can’t match the speed and memory efficiency of C++.

  • Because the component model is implemented by the browser, less JavaScript needs to be downloaded, parsed, and executed before a component is able to render.

  • With JavaScript frameworks, the browser doesn’t “see” the components and thus can’t optimize for them. It just looks like one gigantic DOM tree to the runtime. With Web Components, the browser knows about every component and its boundaries, and can perform various internal optimizations to improve performance. This is particularly important in applications with large amounts of CSS where the absence of Web Component Shadow DOM makes it impossible to fix certain rendering performance problems. Non-web component libraries literally block the browser from optimizations it could otherwise perform.

  • The Web Component model favors modern reactivity patterns and surgical DOM updates that massively outperform the Virtual DOM approaches of libraries like React. You can see this in the way that observedAttributes and the attributeChangedCallback work.

Specifications

Web components are a collection of web standards (W3C Web Components Community Group) that enable an HTML native component model. They are a meta-specification made possible by the above specifications:

Latest Meeting Notes

Drafts, Reviews & Explainers

A declarative API to allow the creation of #shadowroots using only HTML and no Javascript. This API allows Web Components that use Shadow DOM to also make use of Server-Side Rendering (SSR), to get rendered content onscreen quickly without requiring Javascript for shadow root attachment and population.

When the shadow root of an element has delegates focus flag set, focusing on the shadow host would automatically “delegates” focus to the first focusable element in the shadow tree instead.

customElements.defineLazy('my-element',  async () => (await import('my-element.js')).default);

Libraries for building web components

Some tools/libraries that simplify Custom Elements definition and content.

Web Components UI Libraries

Design Systems build with Web Components

Sites build entirely with Web Components

A couple of years back, Microsoft re-built the MSN experience with the Fluent UI Web Components based on FAST. This improved performance by 30%–50% over the previous React version Approximately 1,500 teams and/or projects within Microsoft have adopted FAST Web Components in the last three years (from 2022).

The software giant has ditched its old React codebase from its previous web version of the Microsoft Store and replaced it with a modern web version that uses Shoelace, Lit, Vite, and a C# ASPNET backend.

Sites using Lit elements

Frameworks

Routers (URL Pattern Standard)

State across multiple components (TC39 Signals)

const counter = new Signal.State(0);
const isEven = new Signal.Computed(() => (counter.get() & 1) == 0);

Stores

Accessibility

Widgets / Standalone elements

History

Resources

About

A curated list of web components libraries and resources

awesome-listweb-componentsawesomeshadow-domwebcomponentscustom-elementsweb-standards