awesome-webcomponents

Web Component guide

A curated list of resources and tools for building and using Web Components

A curated list of awesome Web Components tools, articles and resources.

GitHub
639 stars
33 watching
52 forks
last commit: 10 months ago
Linked from 2 awesome lists

awesome-listwebcomponents

Awesome Web Components / Specifications
Official Custom Elements Spec
Official HTML Imports Spec
Official Templates Spec
Official Shadow DOM Spec

Awesome Web Components / Web Standards
Web Components 101: What are Web Components?
Intro to Shadow DOM by Agraj Mangal
Custom Elements by Eric Bidelman
Can I use Web Components?
Introduction to HTML Imports by Eiji Kitamura
Best Practice for Creating Custom Elements

Awesome Web Components / Guides
Tutorial: How to create a Web Component?
A Guide to Web Components by Rob Dodson
How to Create Your Own HTML Elements With Web Components by Kezz Bracey
Web Components é uma Revolução? (pt-br) by Akita
Web Components: Introdução (pt-br) by Diego Eis
EXTENDING THE WEB WITH COMPONENTS by Martin Naumann
Web Components
A Guide to Styling Elements by Eric Bidelman
Web Components in Action (book) by Ben Farrell

Awesome Web Components / Interop
Here’s the difference between Polymer and Angular by Alex Mingoia
The roles of AngularJS and Polymer by Dr. Axel Rauschmayer
Plans for supporting Web Components in AngularJS and Ember.js by Dr. Axel Rauschmayer
Angular Custom Element 108 over 9 years ago by David Shapiro
Integrating Web Components with AngularJS by Pascal Precht
View Encapsulation in Angular 2 by Pascal Precht
Creating Container Components, Part 3: Angular 2 Component Directives by Kara Erickson
A Bet on Web Components and Ember.Component Synchronicity by pixelhandler
Web Components in Angular, Ember, and React. by Chris Bateman
Using Polymer WebComponents with Angular.js by Josh Crowther

Awesome Web Components / SEO
Introducing Web Components and What It Means for Search Engine Optimization and Privacy

Awesome Web Components / Accessibility
Accessibility of Web Components by Marcy Sutton
Accessible Web Components by By Addy Osmani and Alice Boxhall
Notes on Web Components + ARIA by Steve Faulkner
Making Polymer Elements Accessible by Alice Boxhall
On the accessibility of web components. Again. by Bruce Lawson

Awesome Web Components / Presentations
Web Components: A chance to create the future by Zeno Rocha
Web Components Shift: a tectonic shift for web development by Eric Bidelman
Real World Web components by Jarrod Overson
Introduction to Web Components by Jason Mayes
Componentizando a Web com Polymer (pt-br) by Stefan Horochovec
Polymer: building modern apps on web components by Eric Bidelman
Desmistificando o Polymer (pt-br) by Beto Muniz
Polymer Elements: Tudo que você precisa saber para criar a web (pt-br) by Beto Muniz
WebApps com Web Components (pt-br) by Beto Muniz
Web Components, A próxima revolução do desenvolvimento web (pt-br) by Beto Muniz
Tudo que você precisa saber para iniciar com Polymer e Webcomponents (pt-br) by GDG Belo Horizonte
Polymer and modern web APIs: In production at Google scale
What are Custom Elements?
The cure for your Web Components hangover
Why you should be using Web Components now. And how.
The Road to Native Web Components
Componentes como peças de lego by Diego Haz
Rip Your Player's Face Off by Steve Heffernan

Awesome Web Components / Articles
Why use Web Components?
Web Components expert articles
Why Web Components Aren’t Ready for Production… Yet by TJ VanToll
Why Web Components Are Ready For Production by TJ VanToll
The State of the Componentised Web by Ian Murphy
Shadow DOM CSS Cheat Sheet by Rob Dodson
Web Components – The Future Web by Arvind Ravulavaru
Web Components! Hoje! by Beto Muniz
Desmistificando o Polymer: Olá Polymer! (pt-br) by Beto Muniz
Desmistificando o Polymer: Porque o Polymer? (pt-br) by Beto Muniz
Desmistificando o Polymer: Polymer FAQ (unofficial) (pt-br) by Beto Muniz
Discoverability for Web Components by Zeno Rocha
Why Web Components? by Zeno Rocha and Addy Osmani
Extending Styles by Philip Walton
What happened to Web Components?
Pros and Cons of Facebook's React vs. Web Components (Polymer)
HTML, the Hero of the Web by Wesley Luyten

Awesome Web Components / Podcasts
WebComponents.org Podcasts
Polymer Podcasts

Awesome Web Components / Web Tools
WebComponents.dev — in-browser IDE to code web components in isolation with 58 templates available, supporting stories and tests
Backlight — with collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems
Web Component DevTools Browser extension improving debugging web components
Web Reflection: A W3C Custom Elements Alternative by Web Reflection
Are We Componentized Yet?
Vulcanize 1,196 over 6 years ago by Polymer Project
Web Components Tester 567 about 1 month ago by Polymer Project
Element Generator for Slush 41 about 8 years ago by WebComponents.org
Element Generator for Yeoman 129 almost 3 years ago by WebComponents.org
webcomponents.js by WebComponents.org
Ele
CustomElements.io
Component Kitchen
Web Components Weekly by Mateus Ortiz

Awesome Web Components / Libraries and Frameworks / Polymer
Polymer Project by Google
Join the Web Components revolution with Polymer by Sing Li
Introduction to Polymer: The Next Generation of Web Development by Matthew McNulty
Unlock the next era of UI development with Polymer by Rob Dodson
Polymer and the Web Components revolution by Matt McNulty
Polymer and Web Components change everything you know about Web development by Eric Bidelman
Using Polymer to Create Web Components by Rey Bango
Sharing Polymer Components: Part 1 by Rey Bango
Sharing Polymer Components: Part 2 by Rey Bango
Inheritance and composition with Polymer by Pascal Precht
Creating responsive UIs by Rob Dodson
Making Web Components accessible by Alice Boxhall
Hello Polymer: Q&A with Google’s Polymer team by Dr. Axel Rauschmayer
Google’s Polymer and the future of web UI frameworks by Dr. Axel Rauschmayer
What polymer and angular tell us about the future success of the web platform and javascript frameworks
The Polymer approach to building single page applications by Eric Bidelman
PolymerSnippets 224 almost 7 years ago by Rob Dodson
Creating a Polymer Chat App with Material Design by Tomomi Imura
Polymer Generator for Yeoman 926 almost 8 years ago
Built with Polymer
Awesome Polymer 397 over 6 years ago by Maurizio Mangione

Awesome Web Components / Libraries and Frameworks / Bosonic
Bosonic Site

Awesome Web Components / Libraries and Frameworks / X-Tags
X-tags Site by Mozilla
Brick by Mozilla

Awesome Web Components / Libraries and Frameworks / Slim-JS
Slim-JS Documentation
Git repository 1,023 about 1 year ago

Awesome Web Components / Libraries and Frameworks / ReactJS
Keo 227 almost 2 years ago for Shadow DOM
Standalone 206 about 8 years ago for Custom Elements

Awesome Web Components / Libraries and Frameworks / SkateJS
SkateJS Repo 3,288 over 2 years ago

Awesome Web Components / Libraries and Frameworks / Aurelia
Aurelia Site

Awesome Web Components / Libraries and Frameworks / Switzerland
Switzerland 268 about 2 months ago

Awesome Web Components / Libraries and Frameworks / VueJS
VueJS Main Repository

Awesome Web Components / Libraries and Frameworks / Mithril
Mithril Main Repository

Awesome Web Components / Libraries and Frameworks / Angular
Angular Main Repository

Awesome Web Components / Libraries and Frameworks / Stencil.js
Stencil.js site
Git repository 12,577 13 days ago
AnywhereUI 30 6 months ago

Awesome Web Components / Libraries and Frameworks / ComponentForge
ComponentForge site
Git repository 3 about 1 year ago
Web components built with ComponentForge
Wny i wrote ComponentForge

Awesome Web Components / Libraries and Frameworks / Bit
Bit 17,893 5 days ago component development, reuse and collaboration tool

Awesome Web Components / Libraries and Frameworks / NuML
NuML site & storybook style-oriented framework and design system
NuML repository 337 over 1 year ago

Awesome Web Components / Libraries and Frameworks / Lego
Lego site native web-components made light and reactive
Lego repository 124 about 2 months ago

Awesome Web Components / Components
Github Time Elements 3,570 about 2 months ago by GitHub
Router Manager 611 almost 7 years ago by Erik Ringsmuth
Polymer Elements Catalog
Responsive Embed 33 almost 9 years ago by Joselito Júnior
Media Chrome (Custom Elements for Media UIs) 1,767 15 days ago by Mux, Inc
Mux Open Elements (Custom Elements for Media) 263 28 days ago by Mux, Inc
ComponentForge Web Components by Darshan Marathe
Image Display Control 16 10 days ago by Frameright

Awesome Web Components / WebComponents.org / Hello World's
Using Polymer 58 over 6 years ago
Using X-Tags 25 over 7 years ago
Using VanillaJS 151 about 6 years ago

Awesome Web Components / WebComponents.org / Boilerplates
Using Polymer 369 over 9 years ago
Using X-Tags 52 over 9 years ago
Using VanillaJS 272 almost 5 years ago

Awesome Web Components / WebComponents.org
Podcasts
Articles
Presentations
Github

Awesome Web Components / Community
Buenos Aires - Web Components Meetup
Paris - Web Components Meetup
London - Web Components Meetup
Madrid - Polymer Meetup
Washington, DC - Polymer Meetup
Washington, DC - Web Components Meetup
Los Angeles - Web Components Meetup
Melbourne - Polymer Meetup
GDG PolymerMexico!
Polymer Summit

Awesome Web Components / Twitter
@polymer
@web_components
@buildWithLit

Backlinks from these awesome lists:

More related projects: