Convert Figma logo to code with AI

web-padawan logoawesome-web-components

A curated list of awesome Web Components resources.

2,910
153
2,910
6
View on GitHub

Top Related Projects

web-padawan's avatar

awesome-web-components

2,910

A curated list of awesome Web Components resources.

webcomponents's avatar

custom-elements-everywhere

1,186

Custom Element + Framework Interoperability Tests.

material-components's avatar

material-components-web

17,142

Modular and customizable Material Design UI components for the web

Quick Overview

The "awesome-web-components" repository is a curated list of resources for Web Components. It provides a comprehensive collection of libraries, tools, articles, and other materials related to Web Components technology. This repository serves as a valuable reference for developers interested in learning about or working with Web Components.

Pros

  • Extensive collection of Web Components resources in one place
  • Regularly updated with new and relevant content
  • Well-organized into categories for easy navigation
  • Community-driven, allowing contributions from various developers

Cons

  • May be overwhelming for beginners due to the large amount of information
  • Some listed resources might become outdated over time
  • Lacks in-depth explanations or tutorials for each resource
  • Primarily focuses on listing resources rather than providing original content

Code Examples

As this is not a code library but a curated list of resources, there are no specific code examples to provide.

Getting Started

Since this is not a code library, there are no specific getting started instructions. However, to make use of this resource:

  1. Visit the repository at https://github.com/web-padawan/awesome-web-components
  2. Browse through the categories to find relevant resources
  3. Click on the links to explore specific tools, libraries, or articles
  4. Consider starring the repository or watching it for updates
  5. If you have a valuable resource to add, you can contribute by creating a pull request

Competitor Comparisons

web-padawan logo

awesome-web-components

2,910

A curated list of awesome Web Components resources.

Pros of awesome-web-components

  • Comprehensive list of Web Components resources
  • Well-organized categories for easy navigation
  • Regularly updated with new content

Cons of awesome-web-components

  • May include outdated or deprecated resources
  • Lacks detailed descriptions for some entries
  • Limited focus on specific frameworks or libraries

Code Comparison

Not applicable, as both repositories are curated lists of resources and don't contain comparable code snippets.

Summary

The awesome-web-components repository is a valuable resource for developers interested in Web Components. It offers a wide range of curated links to libraries, tools, articles, and other resources related to Web Components technology. The repository's organization makes it easy for users to find relevant information quickly.

However, due to the rapidly evolving nature of web technologies, some listed resources may become outdated over time. Additionally, while the repository covers a broad range of topics, it may not provide in-depth information on specific frameworks or libraries.

Overall, awesome-web-components serves as an excellent starting point for developers looking to explore and learn about Web Components, offering a comprehensive overview of the ecosystem and available resources.

webcomponents logo

custom-elements-everywhere

1,186

Custom Element + Framework Interoperability Tests.

Pros of custom-elements-everywhere

  • Focuses specifically on testing framework compatibility with custom elements
  • Provides a comprehensive suite of tests for various web component features
  • Offers clear, visual results showing compatibility across frameworks

Cons of custom-elements-everywhere

  • Limited to compatibility testing, not a general resource for web components
  • May not cover all possible use cases or edge cases in real-world applications
  • Less frequently updated compared to awesome-web-components

Code Comparison

custom-elements-everywhere example (test suite):

describe('attributes and properties', () => {
  it('will pass data as properties', async () => {
    await fixture(
      html`<ce-with-properties
        .bool="${true}"
        .num="${42}"
        .str="${'bar'}"
        .arr="${['one', 'two']}"
        .obj="${{foo: 'bar'}}"
      ></ce-with-properties>`
    );
  });
});

awesome-web-components example (resource list):

## Libraries

- [lit-element](https://lit-element.polymer-project.org) - Simple base class for creating fast, lightweight web components with lit-html.
- [haunted](https://github.com/matthewp/haunted) - React's Hooks API implemented for web components.
- [hybrids](https://github.com/hybridsjs/hybrids) - UI library for creating Web Components with simple and functional API.

The code comparison illustrates the different focus of each repository: custom-elements-everywhere provides test suites for compatibility, while awesome-web-components offers a curated list of resources and libraries for web components.

material-components logo

material-components-web

17,142

Modular and customizable Material Design UI components for the web

Pros of Material Components Web

  • Comprehensive set of pre-built UI components following Material Design guidelines
  • Officially maintained by Google, ensuring high-quality and up-to-date components
  • Extensive documentation and examples for easy implementation

Cons of Material Components Web

  • Limited flexibility for customization outside of Material Design aesthetics
  • Larger bundle size due to the comprehensive nature of the library
  • Steeper learning curve for developers unfamiliar with Material Design principles

Code Comparison

Material Components Web:

import {MDCRipple} from '@material/ripple';

const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));

Awesome Web Components (example using LitElement):

import {LitElement, html} from 'lit-element';

class MyButton extends LitElement {
  render() {
    return html`<button><slot></slot></button>`;
  }
}

Material Components Web provides a more opinionated and feature-rich implementation, while Awesome Web Components showcases a variety of lightweight, customizable solutions. The choice between them depends on project requirements, design preferences, and development flexibility needs.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

  • <active-table> - Editable table web component.
  • <api-viewer> - API documentation and live playground for Web Components.
  • <chess-board> - Standalone chess board web component.
  • <css-doodle> - Web component for drawing patterns with CSS.
  • <dark-mode-toggle> - Custom element that allows to create a dark mode toggle or switch.
  • <deep-chat> - Web component for chat with AI capabilities.
  • <emoji-picker> - Lightweight emoji picker, distributed as a web component.
  • <fg-modal> - Accessible modal dialog web component.
  • <file-viewer> - Web component built with Svelte to view files.
  • <json-viewer> - Web component to visualize JSON data in a tree view.
  • <lite-youtube> - Lite YouTube embed with a focus on visual performance.
  • <midi-player> - MIDI file player and visualizer web components.
  • <model-viewer> - Web component for rendering interactive 3D models.
  • <player-x> - Media player web component.
  • <progressive-image> - Custom element to progressively enhance image placeholders.
  • <qr-code> – Web component for rendering customizable, animate-able, SVG-based QR codes.
  • <range-slider> - Accessible range slider custom element with keyboard support.
  • <rapi-doc> - Web component for creating documentation from OpenAPI Specification.
  • <shader-doodle> - Web component for writing and rendering shaders.
  • <theme-switch> - Animated toggle button to switch between light, dark, and system theme.
  • <trix-editor> - Rich text editor custom element for everyday writing.
  • <vime-player> - Customizable, extensible, accessible and framework agnostic media player.
  • <web-vitals> - Bring web vitals quickly into your page using custom elements.

Component Libraries

Design Systems

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.
  • 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.
  • 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.
  • 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

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

Insights

Podcasts

Presentations

Talks

Usage Metrics

Proposals

Form-associated Custom Elements

Constructable Stylesheet Objects

Custom State Pseudo Class

Miscellaneous

  • bruck - Prototyping system built with web components and the Houdini Paint API.
  • Vaadin Directory - Publish, discuss and rate web components
  • webcomponents.org - Discuss & share web components.

Archive

Polyfills

Modern browsers supports web components standards without any of the polyfills listed below. The only notable exception is that customized built-in elements are rejected by WebKit (Safari).

Custom Elements polyfills

Customized Built-in Elements polyfills

Shadow DOM shims

HTML Templates polyfills

History

The articles below represent a long story of the Web Components specifications on the way towards the standardization. Some of them refer to earlier, so-called "v0" Shadow DOM and Custom Elements specs, and abandoned HTML Imports spec. These materials are here for historical reasons only, they are grouped by years and listed in chronological order.

2019

2018

2017

2016

2015

2014

2013

2012

2011

Who To Follow

Polymer
Stencil
open-wc.org
webcomponents.dev
Justin Fagnani
Viljami Salminen
Jan Miksovsky
Serhii Kulykov

Maintainers