Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/mallickhruday/awesome-custom-elements

A curated list of awesome Custom Elements, Web Components tools, frameworks, libraries, tutorials, articles and resources.
https://github.com/mallickhruday/awesome-custom-elements
List: awesome-custom-elements
Last synced: 16 days ago
JSON representation
A curated list of awesome Custom Elements, Web Components tools, frameworks, libraries, tutorials, articles and resources.
Host: GitHub
URL: https://github.com/mallickhruday/awesome-custom-elements
Owner: mallickhruday
License: mit
Created: 2019-04-20T17:34:34.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2019-01-14T12:17:21.000Z (almost 6 years ago)
Last Synced: 2024-04-22T03:33:43.945Z (8 months ago)
Homepage:
Size: 8.79 KB
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project

ultimate-awesome - awesome-custom-elements - A curated list of awesome Custom Elements, Web Components tools, frameworks, libraries, tutorials, articles and resources. (Other Lists / PowerShell Lists)
README

        # Awesome Web Components

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

- [Awesome Custom Elements & Web Components]

    - [Specifications](#specifications)

    - [Web Standards](#web-standards)

    - [Guides](#guides)

    - [Interop](#interop)

    - [SEO](#seo)

    - [Acessibility](#acessibility)

    - [Presentations](#presentations)

    - [Articles](#articles)

    - [Podcasts](#podcasts)

    - [Web Tools](#web-tools)

    - [Libraries and Frameworks](#libraries-and-frameworks)

        - [Bosonic](#bosonic)

        - [X-tags](#x-tags)

        - [Polymer](#polymer)

        - [ReactJS](#reactjs)

        - [SkateJS](#skatejs)

        - [Aurelia](#aurelia)

        - [Switzerland](#switzerland)

    - [Components](#components)

    - [WebComponents.org](#webcomponentsorg)

    - [Community](#community)

    - [Twitter](#twitter)

    - [Contributing](#contributing)

## Specifications

*Specifications of Web Components*

* [Official Custom Elements Spec](http://w3c.github.io/webcomponents/spec/custom/)

* [Official HTML Imports Spec](http://w3c.github.io/webcomponents/spec/imports/)

* [Official Templates  Spec](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)

* [Official Shadow DOM Spec](http://w3c.github.io/webcomponents/spec/shadow/)

## Web Standards

*Resources about the web standards under Web Components*

* [Intro to Shadow DOM](http://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966) by Agraj Mangal.

* [Custom Elements](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/) by Eric Bidelman.

* [Can I use Web Components?](http://caniuse.com/#search=web%20components).

* [Introduction to HTML Imports](http://webcomponents.org/articles/introduction-to-html-imports/) by Eiji Kitamura.

* [Best Practice for Creating Custom Elements](http://www.broken-links.com/2015/01/27/best-practice-creating-custom-elements/).

## Guides

*Guides about Web Components*

* [A Guide to Web Components](https://css-tricks.com/modular-future-web-components/) by Rob Dodson.

* [How to Create Your Own HTML Elements With Web Components](http://webdesign.tutsplus.com/articles/how-to-create-your-own-html-elements-with-web-components--cms-21524) by Kezz Bracey.

* [Web Components é uma Revolução? (pt-br)](http://www.akitaonrails.com/2014/07/06/web-components-e-uma-revolucao#.VULzLNNVhBe) by Akita.

* [Web Components: Introdução (pt-br)](http://tableless.com.br/web-components-introducao/) by Diego Eis.

* [EXTENDING THE WEB WITH COMPONENTS](http://html5hub.com/extending-the-web-with-components/#i.1in3tsi34tfhwy) by Martin Naumann.

* [Web Components](http://blog.romanliutikov.com/post/62104274790/web-components)

* [A Guide to Styling Elements](https://www.polymer-project.org/0.5/articles/styling-elements.html) by Eric Bidelman .

## Interop

*Interoperabilty of Web Components*

* [Here’s the difference between Polymer and Angular](http://www.binpress.com/blog/2014/06/26/polymer-vs-angular/) by Alex Mingoia.

* [The roles of AngularJS and Polymer](http://www.2ality.com/2014/07/angularjs-vs-polymer.html) by Dr. Axel Rauschmayer.

* [Plans for supporting Web Components in AngularJS and Ember.js](http://www.2ality.com/2013/05/web-components-angular-ember.html) by Dr. Axel Rauschmayer.

* [Angular Custom Element](https://github.com/dgs700/angular-custom-element) by David Shapiro.

* [Integrating Web Components with AngularJS](http://pascalprecht.github.io/2014/10/25/integrating-web-components-with-angularjs/) by Pascal Precht.

* [View Encapsulation in Angular 2](http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html) by Pascal Precht.

* [Creating Container Components, Part 3: Angular 2 Component Directives](https://www.airpair.com/angularjs/posts/creating-components-p3-angular2-directives) by Kara Erickson

* [A Bet on Web Components and Ember.Component Synchronicity](http://pixelhandler.com/posts/a-bet-on-web-components-and-embercomponent-synchronicity) by pixelhandler

* [Web Components in Angular, Ember, and React.](http://cbateman.com/blog/web-components-in-angular-ember-and-react/) by Chris Bateman

* [Using Polymer WebComponents with Angular.js](http://jcrowther.io/2015/05/26/using-polymer-webcomponents-with-angular-js/) by Josh Crowther

## SEO

*SEO and Web Components*

* [Introducing Web Components and What It Means for Search Engine Optimization and Privacy](https://medium.com/cool-code-pal/introducing-web-components-and-what-it-means-for-search-engine-optimization-and-privacy-b21bfc1f63c7).

## Accessibility

*Accessibility and Web Components*

* [Accessibility of Web Components](http://webcomponents.org/presentations/accessibility-of-web-components-at-jsconf-us/) by Marcy Sutton.

* [Accessible Web Components](https://www.polymer-project.org/0.5/articles/accessible-web-components.html) by By Addy Osmani and Alice Boxhall.

* [Notes on Web Components + ARIA](http://www.paciellogroup.com/blog/2012/07/notes-on-web-components-aria/) by Steve Faulkner.

* [Making Polymer Elements Accessible](http://webcomponents.org/presentations/making-polymer-elements-accessible/) by Alice Boxhall.

* [On the accessibility of web components. Again.](http://www.brucelawson.co.uk/2014/on-the-accessibility-of-web-components-again/) by Bruce Lawson

## Presentations

*Some presentations about Web Components*

* [Web Components: A chance to create the future](https://www.youtube.com/watch?v=JUzjr1bIRUg) by Zeno Rocha.

* [Web Components Shift: a tectonic shift for web development](http://www.webcomponentsshift.com/#1) by Eric Bidelman.

* [Real World Web components](http://pt.slideshare.net/JarrodOverson/real-world-web-components) by Jarrod Overson.

* [Introduction to Web Components](http://slides.com/jasonmayes/introduction-to-web-components#/) by Jason Mayes.

* [Componentizando a Web com Polymer (pt-br)](http://www.slideshare.net/horochovec/componentizando-a-web-com-polymer) by Stefan Horochovec.

* [Polymer: building modern apps on web components](http://html5-demos.appspot.com/static/polymer/index.html#1) by Eric Bidelman.

* [Desmistificando o Polymer (pt-br)](https://www.youtube.com/watch?v=Lf-n6d7hfPs) by Beto Muniz.

* [Polymer Elements: Tudo que você precisa saber para criar a web (pt-br)](https://speakerdeck.com/obetomuniz/polymer-elements-tudo-que-voce-precisa-saber-para-criar-a-web) by Beto Muniz.

* [WebApps com Web Components (pt-br)](https://speakerdeck.com/obetomuniz/webapps-com-web-components) by Beto Muniz.

* [Web Components, A próxima revolução do desenvolvimento web (pt-br)](https://speakerdeck.com/obetomuniz/web-components-a-proxima-revolucao-do-desenvolvimento-web) by Beto Muniz.

* [Tudo que você precisa saber para iniciar com Polymer e Webcomponents (pt-br)](https://www.youtube.com/watch?v=CwiTIYBUHTY) by GDG Belo Horizonte.

* [Polymer and modern web APIs: In production at Google scale](http://webcomponents.org/presentations/polymer-and-modern-web-apis-at-google-io/)

* [What are Custom Elements?](http://webcomponents.org/presentations/what-are-custom-elements/)

* [The cure for your Web Components hangover](http://webcomponents.org/presentations/the-cure-for-your-web-components-hangover-at-jquery-uk/)

* [Why you should be using Web Components now. And how.](http://webcomponents.org/presentations/why-you-should-be-using-web-components-and-how-at-devweek/)

* [The Road to Native Web Components](http://www.modernwebui.org/category/web-components/)

## Articles

*Articles about Web Components*

* [Why Web Components Aren’t Ready for Production… Yet](http://developer.telerik.com/featured/web-components-arent-ready-production-yet/) by TJ VanToll.

* [Why Web Components Are Ready For Production](http://developer.telerik.com/featured/web-components-ready-production/) by TJ VanToll.

* [The State of the Componentised Web](http://www.futureinsights.com/home/the-state-of-the-componentised-web.html) by Ian Murphy.

* [Shadow DOM CSS Cheat Sheet](http://robdodson.me/shadow-dom-css-cheat-sheet/) by Rob Dodson.

* [Web Components – The Future Web](http://thejackalofjavascript.com/web-components-future-web/) by Arvind Ravulavaru.

* [Web Components! Hoje!](http://betomuniz.com/blog/web-components-hoje/) by Beto Muniz.

* [Desmistificando o Polymer: Olá Polymer! (pt-br)](http://betomuniz.com/blog/desmistificando-o-polymer-parte-1/) by Beto Muniz.

* [Desmistificando o Polymer: Porque o Polymer? (pt-br)](http://betomuniz.com/blog/desmistificando-o-polymer-parte-2/) by Beto Muniz.

* [Desmistificando o Polymer: Polymer FAQ (unoffical) (pt-br)](http://betomuniz.com/blog/desmistificando-o-polymer-parte-3/) by Beto Muniz.

* [Discoverability for Web Components](https://medium.com/@zenorocha/discoverability-for-web-components-72ce29f128b2) by Zeno Rocha.

* [Why Web Components?](http://webcomponents.org/articles/why-web-components/) by Zeno Rocha and Addy Osmani.

* [Extending Styles](http://philipwalton.com/articles/extending-styles/) by Philip Walton.

* [What happened to Web Components?](http://www.2ality.com/2015/08/web-component-status.html)

* [Pros and Cons of Facebook's React vs. Web Components (Polymer)](http://programmers.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer)

## Podcasts

*Podcasts about Web Components*

* [WebComponents.org Podcasts](http://webcomponents.org/podcasts/)

* [Polymer Podcasts](http://www.polymerpodcast.com/)

## Web Tools

*Some web tools related to Web Components*

* [Web Reflection: A W3C Custom Elements Alternative](http://webreflection.blogspot.com.br/2014/07/a-w3c-custom-elements-alternative.html) by Web Reflection.

* [Are We Componentized Yet?](http://jonrimmer.github.io/are-we-componentized-yet/).

* [Vulcanize](https://github.com/Polymer/vulcanize) by Polymer Project.

* [Web Components Tester](https://github.com/Polymer/web-component-tester) by Polymer Project.

* [Element Generator for Slush](https://github.com/webcomponents/slush-element) by WebComponents.org.

* [Element Generator for Yeoman](https://github.com/webcomponents/generator-element) by WebComponents.org.

* [webcomponents.js](http://webcomponents.org/polyfills/) by WebComponents.org.

* [Ele](https://ele.io/).

* [CustomElements.io](http://customelements.io/).

* [Component Kitchen](http://component.kitchen/).

* [Web Components Weekly](http://webcomponentsweekly.me/) by Mateus Ortiz.

## Libraries and Frameworks

*Libraries and frameworks related with Web Components*

### Polymer

* [Polymer Project](https://www.polymer-project.org) by Google.

* [Join the Web Components revolution with Polymer](http://www.ibm.com/developerworks/library/wa-polymer/) by Sing Li.

* [Introduction to Polymer: The Next Generation of Web Development](https://www.youtube.com/watch?v=8-Zq2KUN6jM) by Matthew McNulty.

* [Unlock the next era of UI development with Polymer](https://www.youtube.com/watch?v=HKrYfrAzqFA) by Rob Dodson.

* [Polymer and the Web Components revolution](https://www.youtube.com/watch?v=yRbOSdAe_JU) by Matt McNulty.

* [Polymer and Web Components change everything you know about Web development](https://www.youtube.com/watch?v=8OJ7ih8EE7s) by Eric Bidelman.

* [Using Polymer to Create Web Components](http://code.tutsplus.com/tutorials/using-polymer-to-create-web-components--cms-20475) by Rey Bango.

* [Sharing Polymer Components: Part 1](http://code.tutsplus.com/tutorials/sharing-polymer-components-part-1--cms-21264) by Rey Bango.

* [Sharing Polymer Components: Part 2](http://code.tutsplus.com/tutorials/sharing-polymer-components-part-2--cms-21497) by Rey Bango.

* [Inheritance and composition with Polymer](http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/) by Pascal Precht.

* [Creating responsive UIs](https://www.youtube.com/watch?v=svfu9iQ8cyg&feature=youtu.be) by Rob Dodson.

* [Making Web Components accessible](https://www.youtube.com/watch?v=_IBiXfxhF-A) by Alice Boxhall.

* [Hello Polymer: Q&A with Google’s Polymer team](http://www.2ality.com/2013/07/hello-polymer.html) by Dr. Axel Rauschmayer.

* [Google’s Polymer and the future of web UI frameworks](http://www.2ality.com/2013/05/google-polymer.html) by Dr. Axel Rauschmayer.

* [What polymer and angular tell us about the future success of the web platform and javascript frameworks](http://blog.testdouble.com/posts/2013-06-26-what-polymer-and-angular-tell-us-about-the-future-success-of-the-web-platform-and-javascript-frameworks.html).

* [The Polymer approach to building single page applications](https://www.polymer-project.org/0.5/articles/spa.html) by Eric Bidelman.

* [PolymerSnippets](https://github.com/robdodson/PolymerSnippets) by Rob Dodson.

* [Creating a Polymer Chat App with Material Design](http://www.pubnub.com/blog/creating-a-polymer-chat-app-with-material-design/) by Tomomi Imura.

* [Polymer Generator for Yeoman](https://github.com/yeoman/generator-polymer/).

* [Built with Polymer](http://builtwithpolymer.org/).

* [Awesome Polymer](https://github.com/Granze/awesome-polymer) by Maurizio Mangione. :guitar:

### Bosonic

* [Bosonic Site](http://bosonic.github.io/).

### X-Tags

* [X-tags Site](http://www.x-tags.org/) by Mozilla.

* [Brick](http://brick.mozilla.io/) by Mozilla.

### ReactJS

* [Keo](https://github.com/Wildhoney/Keo) for Shadow DOM.

* [Standalone](https://github.com/Wildhoney/Standalone) for Custom Elements.

### SkateJS

* [SkateJS Repo](https://github.com/skatejs/skatejs)

### Aurelia

* [Aurelia Site](http://aurelia.io/).

### Switzerland

* [Switzerland](https://github.com/Wildhoney/Switzerland)

### Smart HTML Elements

* [Smart HTML Elements](https://htmlelements.com/)

## Components

*Some Web Components*

* [Github Time Elements](https://github.com/github/time-elements) by GitHub.

* [Router Manager](https://github.com/erikringsmuth/app-router) by Erik Ringsmuth.

* [Polymer Elements Catalog](https://elements.polymer-project.org/)

* [Responsive Embed](https://github.com/joselitojunior/responsive-embed) by Joselito Júnior

## WebComponents.org

*A [WebComponents.org](http://webcomponents.org/) selection*

* Hello World's

    * [Using Polymer](https://github.com/webcomponents/hello-world-polymer).

    * [Using X-Tags](https://github.com/webcomponents/hello-world-xtag).

    * [Using VanillaJS](https://github.com/webcomponents/hello-world-element).

* Boilerplates

    * [Using Polymer](https://github.com/webcomponents/polymer-boilerplate).

    * [Using X-Tags](https://github.com/webcomponents/x-tag-boilerplate).

    * [Using VanillaJS](https://github.com/webcomponents/element-boilerplate).

* [Podcasts](http://webcomponents.org/podcasts/).

* [Articles](http://webcomponents.org/articles/).

* [Presentations](http://webcomponents.org/presentations/).

* [Github](https://github.com/webcomponents).

## Community

*Events, Meetups, etc.*

* [Belo Horizonte - Web Components & Polymer Meetup](http://www.meetup.com/Web-Components-Polymer-Belo-Horizonte/)

* [Buenos Aires - Web Components Meetup](http://www.meetup.com/Web-Components-BA)

* [Paris - Web Components Meetup](http://www.meetup.com/paris-webComponents)

* [London - Web Components Meetup](http://www.meetup.com/web-components-meetup)

* [Madrid - Polymer Meetup](http://www.meetup.com/Madrid-Polymer-Group)

* [Washington, DC - Polymer Meetup](http://www.meetup.com/polymer-dc)

* [Washington, DC - Web Components Meetup](http://www.meetup.com/DC-Web-Components)

* [Los Angeles - Web Components Meetup](http://www.meetup.com/Web-Components-LA)

* [Melbourne - Polymer Meetup](http://www.meetup.com/Melbourne-Polymer-Meetup)

* [GDG PolymerMexico!](http://www.meetup.com/PolymerMex)

* [Polymer Summit](https://www.polymer-project.org/summit)

## Twitter

*Who to follow*

* [@polymer](https://twitter.com/polymer)

* [@web_components](https://twitter.com/web_components)

* [@ebidel](https://twitter.com/ebidel)

* [@jkomoros](https://twitter.com/jkomoros)

* [@zenorocha](https://twitter.com/zenorocha)

* [@addyosmani](https://twitter.com/addyosmani)

* [@PascalPrecht](https://twitter.com/PascalPrecht)

* [@csuwildcat](https://twitter.com/csuwildcat)

* [@rob_dodson](https://twitter.com/rob_dodson)

* [@sindresorhus](https://twitter.com/sindresorhus)

* [@eduardolundgren](https://twitter.com/eduardolundgren)

* [@djalmaaraujo](https://twitter.com/djalmaaraujo)

* [@passy](https://twitter.com/passy)

* [@djalmaaraujo](https://twitter.com/djalmaaraujo)

* [@Nevraeka](https://twitter.com/Nevraeka)

* [@nevir](https://twitter.com/nevir)

* [@keanulee](https://twitter.com/cironunes)

* [@obetomuniz](https://twitter.com/obetomuniz)

## Contributing

Your contributions are always welcome!