Skip to content

mateusortiz/webcomponents-the-right-way

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Oct 17, 2014

Web Components the Right Way

Awesome

A curated list of awesome Web Components resources.

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

Web Components the Right Way was made with love by Mateus Ortiz and maintained by Serhii Kulykov

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

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

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

Starter Kits

Tools

Books

Tutorials

Insights

Podcasts

Presentations

Talks

Usage Metrics

Proposals

Form-associated Custom Elements

Custom State Pseudo class

Constructable Stylesheet Objects

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

License

Copyright 2014-2018, All rights reserved.

Code licensed under the: MIT license

@author Mateus Ortiz mteusortiz@gmail.com

About

This is a guide intended to introduce to Web Components. Everyone can contribute here!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published