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

640 stars
33 watching
52 forks
last commit: over 2 years 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 DOMby Agraj Mangal
Custom Elementsby Eric Bidelman
Can I use Web Components?
Introduction to HTML Importsby Eiji Kitamura
Best Practice for Creating Custom Elements

Awesome Web Components / Guides

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

Awesome Web Components / Interop

Here’s the difference between Polymer and Angularby Alex Mingoia
The roles of AngularJS and Polymerby Dr. Axel Rauschmayer
Plans for supporting Web Components in AngularJS and Ember.jsby Dr. Axel Rauschmayer
Angular Custom Element108about 11 years agoby David Shapiro
Integrating Web Components with AngularJSby Pascal Precht
View Encapsulation in Angular 2by Pascal Precht
Creating Container Components, Part 3: Angular 2 Component Directivesby Kara Erickson
A Bet on Web Components and Ember.Component Synchronicityby pixelhandler
Web Components in Angular, Ember, and React.by Chris Bateman
Using Polymer WebComponents with Angular.jsby 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 Componentsby Marcy Sutton
Accessible Web Componentsby By Addy Osmani and Alice Boxhall
Notes on Web Components + ARIAby Steve Faulkner
Making Polymer Elements Accessibleby Alice Boxhall
On the accessibility of web components. Again.by Bruce Lawson

Awesome Web Components / Presentations

Web Components: A chance to create the futureby Zeno Rocha
Web Components Shift: a tectonic shift for web developmentby Eric Bidelman
Real World Web componentsby Jarrod Overson
Introduction to Web Componentsby Jason Mayes
Componentizando a Web com Polymer (pt-br)by Stefan Horochovec
Polymer: building modern apps on web componentsby 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 legoby Diego Haz
Rip Your Player's Face Offby Steve Heffernan

Awesome Web Components / Articles

Why use Web Components?
Web Components expert articles
Why Web Components Aren’t Ready for Production… Yetby TJ VanToll
Why Web Components Are Ready For Productionby TJ VanToll
The State of the Componentised Webby Ian Murphy
Shadow DOM CSS Cheat Sheetby Rob Dodson
Web Components – The Future Webby 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 Componentsby Zeno Rocha
Why Web Components?by Zeno Rocha and Addy Osmani
Extending Stylesby Philip Walton
What happened to Web Components?
Pros and Cons of Facebook's React vs. Web Components (Polymer)
HTML, the Hero of the Webby 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 DevToolsBrowser extension improving debugging web components
Web Reflection: A W3C Custom Elements Alternativeby Web Reflection
Are We Componentized Yet?
Vulcanize1,195over 8 years agoby Polymer Project
Web Components Tester567almost 2 years agoby Polymer Project
Element Generator for Slush41almost 10 years agoby WebComponents.org
Element Generator for Yeoman129over 4 years agoby WebComponents.org
webcomponents.jsby WebComponents.org
Ele
CustomElements.io
Component Kitchen
Web Components Weeklyby Mateus Ortiz

Awesome Web Components / Libraries and Frameworks / Polymer

Polymer Projectby Google
Join the Web Components revolution with Polymerby Sing Li
Introduction to Polymer: The Next Generation of Web Developmentby Matthew McNulty
Unlock the next era of UI development with Polymerby Rob Dodson
Polymer and the Web Components revolutionby Matt McNulty
Polymer and Web Components change everything you know about Web developmentby Eric Bidelman
Using Polymer to Create Web Componentsby Rey Bango
Sharing Polymer Components: Part 1by Rey Bango
Sharing Polymer Components: Part 2by Rey Bango
Inheritance and composition with Polymerby Pascal Precht
Creating responsive UIsby Rob Dodson
Making Web Components accessibleby Alice Boxhall
Hello Polymer: Q&A with Google’s Polymer teamby Dr. Axel Rauschmayer
Google’s Polymer and the future of web UI frameworksby 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 applicationsby Eric Bidelman
PolymerSnippets224over 8 years agoby Rob Dodson
Creating a Polymer Chat App with Material Designby Tomomi Imura
Polymer Generator for Yeoman926over 9 years ago
Built with Polymer
Awesome Polymer399over 8 years agoby Maurizio Mangione

Awesome Web Components / Libraries and Frameworks / Bosonic

Bosonic Site

Awesome Web Components / Libraries and Frameworks / X-Tags

X-tags Siteby Mozilla
Brickby Mozilla

Awesome Web Components / Libraries and Frameworks / Slim-JS

Slim-JS Documentation
Git repository1,023about 3 years ago

Awesome Web Components / Libraries and Frameworks / ReactJS

Keo227over 3 years agofor Shadow DOM
Standalone206almost 10 years agofor Custom Elements

Awesome Web Components / Libraries and Frameworks / SkateJS

SkateJS Repo3,289over 4 years ago

Awesome Web Components / Libraries and Frameworks / Aurelia

Aurelia Site

Awesome Web Components / Libraries and Frameworks / Switzerland

Switzerland268almost 2 years ago

Awesome Web Components / Libraries and Frameworks / VueJS

VueJSMain Repository

Awesome Web Components / Libraries and Frameworks / Mithril

MithrilMain Repository

Awesome Web Components / Libraries and Frameworks / Angular

AngularMain Repository

Awesome Web Components / Libraries and Frameworks / Stencil.js

Stencil.js site
Git repository12,616almost 2 years ago
AnywhereUI30over 2 years ago

Awesome Web Components / Libraries and Frameworks / ComponentForge

ComponentForge site
Git repository3almost 3 years ago
Web components built with ComponentForge
Wny i wrote ComponentForge

Awesome Web Components / Libraries and Frameworks / Bit

Bit17,938almost 2 years agocomponent development, reuse and collaboration tool

Awesome Web Components / Libraries and Frameworks / NuML

NuML site & storybookstyle-oriented framework and design system
NuML repository337over 3 years ago

Awesome Web Components / Libraries and Frameworks / Lego

Lego sitenative web-components made light and reactive
Lego repository124almost 2 years ago

Awesome Web Components / Components

Github Time Elements3,582almost 2 years agoby GitHub
Router Manager611over 8 years agoby Erik Ringsmuth
Polymer Elements Catalog
Responsive Embed33over 10 years agoby Joselito Júnior
Media Chrome (Custom Elements for Media UIs)1,908almost 2 years agoby Mux, Inc
Mux Open Elements (Custom Elements for Media)271almost 2 years agoby Mux, Inc
ComponentForge Web Componentsby Darshan Marathe
Image Display Control16almost 2 years agoby Frameright

Awesome Web Components / WebComponents.org / Hello World's

Using Polymer58about 8 years ago
Using X-Tags25over 9 years ago
Using VanillaJS151almost 8 years ago

Awesome Web Components / WebComponents.org / Boilerplates

Using Polymer369about 11 years ago
Using X-Tags52over 11 years ago
Using VanillaJS272over 6 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: