@harrisonqian / Awesome › wiki / front-end-development / web-components
Public View

Web Components

repo: web-padawan/awesome-web-components
category: Front-End Development related: Lit · Javascript · Css

Awesome Web Components Awesome

A curated list of awesome Web Components resources.

Note This project was previously named "Web Components the Right Way"

Web Components — a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

Contents

Introduction

Standards

Custom Elements

Custom Elements provide a way for authors to build their own fully-featured DOM elements.

Shadow DOM

Shadow DOM describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM.

HTML Templates

<template> element is used to declare fragments of HTML that can be cloned and inserted in the document by script.

CSS Shadow Parts

CSS Shadow Parts allow developers to expose certain elements inside Shadow DOM for styling purposes.

Guides

Accessibility

Best Practices

Codelabs

Examples

  • generic-components - Collection of generic web components with a focus on accessibility, and ease of use.
  • howto-components - Collection of web components that implement common web UI patterns.
  • Nude UI - Collection of accessible, customizable, ultra-light web components.
  • open-wc code examples - Collection of best practices and design patterns for developing web components.
  • vanilla-retro-js - Vanilla JS UI component library of HTML deprecated tags.
  • web-components-examples - Series of web components examples, related to the MDN web components documentation.

Articles

Architecture

Interoperability

Limitations

Styling

Real World

Case Studies

Components

Component Libraries

Design Systems

  • Astro Space UX Design System - Set of components to build rich space app experiences with established interaction patterns.
  • Auro Design System - Alaska Airlines design system to innovate on ideas and collaborate on the future.
  • Blueprint UI - Web Component based design system with flexible and lightweight components.
  • Bolt Design System - Twig and Web Component-powered UI components, reusable visual styles and tooling.
  • Calcite Components - Shared Web Components for Esri's Calcite design framework.
  • Carbon Web Components - Carbon Design System variant on top of Web Components.
  • [Clarity Core Web Components](https://github.com/vmware-clarity/core/tree/main/projects/core) - Suite of web components from the Clarity Design System.
  • Crayons - Collection of web components that adheres to the Freshworks Design System.
  • FAST Components - Library of Web Components based on the FAST design language.
  • Fluent UI Web Components - Library of Web Components that supports Microsoft's Fluent design language.
  • Forge Components - Library of Web Components adhering to the Forge Design System.
  • GOV.UK Web Components - Set of encapsulated web components consuming the GOV.UK Design System.
  • Helix UI - Web Component library for the Helix Design System.
  • Liquid - UI component library based on the Liquid Design System.
  • Lyne Components - Building blocks of the Lyne Design System are based on Web Components.
  • Material Web Components - Material Design implemented as Web Components.
  • Momentum UI Web Components - Set of UI components based on Momentum Design.
  • Nord - Nordhealth’s design system for products, digital experiences and brand.
  • NuML | NUDE Elements - HTML Framework and Design System based on Web Components and runtime CSS generation.
  • OutlineJS - Web component based design system starter kit.
  • PatternFly Elements - Collection of flexible and lightweight Web Components based on the Unified Design Kit.
  • Pharos Design System - JSTOR's design system to create cohesive, supportive, and beautiful experiences.
  • Red Hat Design System - Web components for building uniform experiences with the Red Hat brand.
  • Siemens iX Web Components - Web Components implementing Siemens iX design system.
  • Spectrum Web Components - Adobe Spectrum design language implementation built with Web Components.
  • UI5 Web Components - Set of reusable UI elements implementing SAP Fiori Design Guidelines.
  • U-M Library Design System - University of Michigan Library Design System.
  • Zooplus web components - Set of web components that implement Z+ shop style guide.

Use Cases

Libraries

Class Based

  • DNA - Progressive Web Components library.
  • element-js - Simple and lightweight base classes for web components with a beautiful API.
  • FAST Element - Lightweight library for building performant, memory-efficient, standards-compliant Web Components.
  • Forge Core - Building blocks and utilities that are used when building Forge Web Components.
  • Joist - Set of small libraries designed to add the bare minimum to web components to make you productive.
  • Lit - Simple library for building fast, lightweight web components.
  • Lightning Web Components - blazing fast, enterprise-grade Web Components foundation.
  • Lume Element - Write custom elements with reactivity and templating powered by Solid.js signals and effects.
  • Omi - Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).
  • Panel - Web Components + Virtual DOM: web standards for powerful UIs.
  • ReadyMade - Write custom element classes with decorators. No dependencies.
  • slim.js - Fast & Robust Front-End Micro-framework based on modern standards.
  • Stencil - Compiler for generating Web Components.
  • Tonic - Minimalist, stable, audit friendly component framework.
  • WebCell - Web Components engine based on VDOM, JSX, MobX & TypeScript.

Functional

  • atomico - Small library for the creation of interfaces based on web components using functions and hooks.
  • Elemento - A lightweight library for building functional web components using signals and Lit.
  • haunted - React's Hooks API implemented for web components.
  • hybrids - UI library for creating Web Components with simple and functional API.
  • Solid Element - Library that extends Solid adding Custom Web Components and extensions.

Integrations

Benchmarks

Frameworks

Angular

  • Angular Elements Overview
  • [Building and consuming Angular Elements as Web Components](https://indepth.dev/building-and-bundling-web-components/)
  • [How to use Angular ngModel and ngForms with WebComponents](https://itnext.io/how-to-use-angular-ngmodel-and-ngforms-with-webcomponents-802bd9e1d3d7)
  • Using Web Components in Angular
  • [Web Components With Angular Ivy In 6 Steps](https://www.softwarearchitekt.at/post/2019/05/18/web-components-custom-elements-with-angular-ivy-in-6-steps.aspx)

React

Vue

Svelte

Ecosystem

Meta Frameworks

  • AMP - Web component framework to easily create user-first experiences for the web.
  • Enhance - Web standards-based HTML framework for building lightweight web applications.
  • luna-js - SSR framework that makes working with the WebComponents standard a breeze.
  • Rocket - Modern web setup for static sites with a sprinkle of JavaScript.
  • Web Components Compiler - Compiler to make server-side rendering of native web components easier.
  • WebC - Framework-independent standalone HTML serializer for generating markup for web components.

Starter Kits

Testing Solutions

Tools

Books

Tutorials

truncated — full list on GitHub

[[curator]]
I'm the Curator. I can help you navigate, organize, and curate this wiki. What would you like to do?