├── CONTRIBUTING.md
├── LICENSE
└── README.md


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contribution Guidelines
 2 | 
 3 | Search previous suggestions before making a new one.
 4 | 
 5 | Please ensure your pull request adheres to the following guidelines:
 6 | 
 7 | - Use the following format: [Website Name](Link to website) - Brief description of what it is and, preferably, why it is awesome.
 8 | - Use [title-casing](https://capitalizemytitle.com/).
 9 | - Drop `A`/`An` from the beginning of a description.
10 | - Link additions should be added to the relevant category in **alphabetical order**.
11 | - New categories or improvements to the existing categorization are welcome.
12 | - Check your spelling and grammar.
13 | - The pull request and commit should have a useful title.
14 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | Creative Commons Legal Code
  2 | 
  3 | CC0 1.0 Universal
  4 | 
  5 |     CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
  6 |     LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
  7 |     ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
  8 |     INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
  9 |     REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
 10 |     PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
 11 |     THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
 12 |     HEREUNDER.
 13 | 
 14 | Statement of Purpose
 15 | 
 16 | The laws of most jurisdictions throughout the world automatically confer
 17 | exclusive Copyright and Related Rights (defined below) upon the creator
 18 | and subsequent owner(s) (each and all, an "owner") of an original work of
 19 | authorship and/or a database (each, a "Work").
 20 | 
 21 | Certain owners wish to permanently relinquish those rights to a Work for
 22 | the purpose of contributing to a commons of creative, cultural and
 23 | scientific works ("Commons") that the public can reliably and without fear
 24 | of later claims of infringement build upon, modify, incorporate in other
 25 | works, reuse and redistribute as freely as possible in any form whatsoever
 26 | and for any purposes, including without limitation commercial purposes.
 27 | These owners may contribute to the Commons to promote the ideal of a free
 28 | culture and the further production of creative, cultural and scientific
 29 | works, or to gain reputation or greater distribution for their Work in
 30 | part through the use and efforts of others.
 31 | 
 32 | For these and/or other purposes and motivations, and without any
 33 | expectation of additional consideration or compensation, the person
 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she
 35 | is an owner of Copyright and Related Rights in the Work, voluntarily
 36 | elects to apply CC0 to the Work and publicly distribute the Work under its
 37 | terms, with knowledge of his or her Copyright and Related Rights in the
 38 | Work and the meaning and intended legal effect of CC0 on those rights.
 39 | 
 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be
 41 | protected by copyright and related or neighboring rights ("Copyright and
 42 | Related Rights"). Copyright and Related Rights include, but are not
 43 | limited to, the following:
 44 | 
 45 |   i. the right to reproduce, adapt, distribute, perform, display,
 46 |      communicate, and translate a Work;
 47 |  ii. moral rights retained by the original author(s) and/or performer(s);
 48 | iii. publicity and privacy rights pertaining to a person's image or
 49 |      likeness depicted in a Work;
 50 |  iv. rights protecting against unfair competition in regards to a Work,
 51 |      subject to the limitations in paragraph 4(a), below;
 52 |   v. rights protecting the extraction, dissemination, use and reuse of data
 53 |      in a Work;
 54 |  vi. database rights (such as those arising under Directive 96/9/EC of the
 55 |      European Parliament and of the Council of 11 March 1996 on the legal
 56 |      protection of databases, and under any national implementation
 57 |      thereof, including any amended or successor version of such
 58 |      directive); and
 59 | vii. other similar, equivalent or corresponding rights throughout the
 60 |      world based on applicable law or treaty, and any national
 61 |      implementations thereof.
 62 | 
 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention
 64 | of, applicable law, Affirmer hereby overtly, fully, permanently,
 65 | irrevocably and unconditionally waives, abandons, and surrenders all of
 66 | Affirmer's Copyright and Related Rights and associated claims and causes
 67 | of action, whether now known or unknown (including existing as well as
 68 | future claims and causes of action), in the Work (i) in all territories
 69 | worldwide, (ii) for the maximum duration provided by applicable law or
 70 | treaty (including future time extensions), (iii) in any current or future
 71 | medium and for any number of copies, and (iv) for any purpose whatsoever,
 72 | including without limitation commercial, advertising or promotional
 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
 74 | member of the public at large and to the detriment of Affirmer's heirs and
 75 | successors, fully intending that such Waiver shall not be subject to
 76 | revocation, rescission, cancellation, termination, or any other legal or
 77 | equitable action to disrupt the quiet enjoyment of the Work by the public
 78 | as contemplated by Affirmer's express Statement of Purpose.
 79 | 
 80 | 3. Public License Fallback. Should any part of the Waiver for any reason
 81 | be judged legally invalid or ineffective under applicable law, then the
 82 | Waiver shall be preserved to the maximum extent permitted taking into
 83 | account Affirmer's express Statement of Purpose. In addition, to the
 84 | extent the Waiver is so judged Affirmer hereby grants to each affected
 85 | person a royalty-free, non transferable, non sublicensable, non exclusive,
 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and
 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the
 88 | maximum duration provided by applicable law or treaty (including future
 89 | time extensions), (iii) in any current or future medium and for any number
 90 | of copies, and (iv) for any purpose whatsoever, including without
 91 | limitation commercial, advertising or promotional purposes (the
 92 | "License"). The License shall be deemed effective as of the date CC0 was
 93 | applied by Affirmer to the Work. Should any part of the License for any
 94 | reason be judged legally invalid or ineffective under applicable law, such
 95 | partial invalidity or ineffectiveness shall not invalidate the remainder
 96 | of the License, and in such case Affirmer hereby affirms that he or she
 97 | will not (i) exercise any of his or her remaining Copyright and Related
 98 | Rights in the Work or (ii) assert any associated claims and causes of
 99 | action with respect to the Work, in either case contrary to Affirmer's
100 | express Statement of Purpose.
101 | 
102 | 4. Limitations and Disclaimers.
103 | 
104 |  a. No trademark or patent rights held by Affirmer are waived, abandoned,
105 |     surrendered, licensed or otherwise affected by this document.
106 |  b. Affirmer offers the Work as-is and makes no representations or
107 |     warranties of any kind concerning the Work, express, implied,
108 |     statutory or otherwise, including without limitation warranties of
109 |     title, merchantability, fitness for a particular purpose, non
110 |     infringement, or the absence of latent or other defects, accuracy, or
111 |     the present or absence of errors, whether or not discoverable, all to
112 |     the greatest extent permissible under applicable law.
113 |  c. Affirmer disclaims responsibility for clearing rights of other persons
114 |     that may apply to the Work or any use thereof, including without
115 |     limitation any person's Copyright and Related Rights in the Work.
116 |     Further, Affirmer disclaims responsibility for obtaining any necessary
117 |     consents, permissions or other rights required for any use of the
118 |     Work.
119 |  d. Affirmer understands and acknowledges that Creative Commons is not a
120 |     party to this document and has no duty or obligation with respect to
121 |     this CC0 or use of the Work.
122 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Awesome Web Components [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)
  2 | 
  3 | A curated list of awesome Web Components resources.
  4 | 
  5 | > **Note**
  6 | > This project was previously named "Web Components the Right Way"
  7 | 
  8 | [Web Components](https://developer.mozilla.org/en-US/docs/Web/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.
  9 | 
 10 | ## Contents
 11 | 
 12 | - [Introduction](#introduction)
 13 | - [Standards](#standards)
 14 |   - [Custom Elements](#custom-elements)
 15 |   - [Shadow DOM](#shadow-dom)
 16 |   - [HTML Templates](#html-templates)
 17 |   - [CSS Shadow Parts](#css-shadow-parts)
 18 | - [Guides](#guides)
 19 |   - [Accessibility](#accessibility)
 20 |   - [Best Practices](#best-practices)
 21 |   - [Codelabs](#codelabs)
 22 |   - [Examples](#examples)
 23 | - [Articles](#articles)
 24 |   - [Architecture](#architecture)
 25 |   - [Interoperability](#interoperability)
 26 |   - [Limitations](#limitations)
 27 |   - [Styling](#styling)
 28 | - [Real World](#real-world)
 29 |   - [Case Studies](#case-studies)
 30 |   - [Components](#components)
 31 |   - [Component Libraries](#component-libraries)
 32 |   - [Design Systems](#design-systems)
 33 |   - [Use Cases](#use-cases)
 34 | - [Libraries](#libraries)
 35 |   - [Class Based](#class-based)
 36 |   - [Functional](#functional)
 37 |   - [Integrations](#integrations)
 38 |   - [Benchmarks](#benchmarks)
 39 | - [Frameworks](#frameworks)
 40 |   - [Angular](#angular)
 41 |   - [React](#react)
 42 |   - [Vue](#vue)
 43 |   - [Svelte](#svelte)
 44 | - [Ecosystem](#ecosystem)
 45 |   - [Meta Frameworks](#meta-frameworks)
 46 |   - [Starter Kits](#starter-kits)
 47 |   - [Testing Solutions](#testing-solutions)
 48 |   - [Tools](#tools)
 49 | - [Books](#books)
 50 | - [Tutorials](#tutorials)
 51 | - [Insights](#insights)
 52 |   - [Podcasts](#podcasts)
 53 |   - [Presentations](#presentations)
 54 |   - [Talks](#talks)
 55 | - [Usage Metrics](#usage-metrics)
 56 | - [Proposals](#proposals)
 57 |   - [Form-associated Custom Elements](#form-associated-custom-elements)
 58 |   - [Constructable Stylesheet Objects](#constructable-stylesheet-objects)
 59 |   - [Custom State Pseudo Class](#custom-state-pseudo-class)
 60 | - [Miscellaneous](#miscellaneous)
 61 | - [Archive](#archive)
 62 |   - [Polyfills](#polyfills)
 63 |   - [History](#history)
 64 | - [Who To Follow](#who-to-follow)
 65 | - [Maintainers](#maintainers)
 66 | 
 67 | ## Introduction
 68 | 
 69 | - [An Introduction to Web Components](https://css-tricks.com/an-introduction-to-web-components/)
 70 | - [Intro to Web Components](https://developer.salesforce.com/blogs/2020/01/intro-to-web-components.html)
 71 | - [The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM](https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/)
 72 | - [The Motivation For Using Web Components, an Introduction](https://www.thinktecture.com/web-components/introduction-and-motivation/)
 73 | - [The Power of Web Components](https://hacks.mozilla.org/2018/11/the-power-of-web-components/)
 74 | - [Web Components 101](https://nhswd.com/blog/web-components-101-what-are-web-components/)
 75 | - [Web Components: From the orbital height](https://javascript.info/webcomponents-intro)
 76 | - [What are browser-native web components?](https://gomakethings.com/what-are-browser-native-web-components/)
 77 | - [Why Web Components?](https://www.fast.design/docs/resources/why-web-components/)
 78 | 
 79 | ## Standards
 80 | 
 81 | ### Custom Elements
 82 | 
 83 | Custom Elements provide a way for authors to build their own fully-featured DOM elements.
 84 | 
 85 | - [A Guide to Custom Elements for React Developers](https://css-tricks.com/a-guide-to-custom-elements-for-react-developers/)
 86 | - [All about HTML Custom Elements](https://github.com/shawnbot/custom-elements)
 87 | - [Custom elements](https://javascript.info/custom-elements)
 88 | - [Custom Elements v1: Reusable Web Components](https://web.dev/custom-elements-v1/)
 89 | - [Handling properties in custom element upgrades](https://nolanlawson.com/2021/08/03/handling-properties-in-custom-element-upgrades/)
 90 | - [Handy Custom Elements' Patterns](https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4)
 91 | - [HTML Living Standard: Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html)
 92 | - [MDN - Using Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
 93 | - [web-platform-tests](https://github.com/web-platform-tests/wpt/tree/master/custom-elements)
 94 | 
 95 | ### Shadow DOM
 96 | 
 97 | 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.
 98 | 
 99 | - [A complete guide on shadow DOM and event propagation](https://pm.dartus.fr/blog/a-complete-guide-on-shadow-dom-and-event-propagation/)
100 | - [DOM Living Standard: Shadow tree](https://dom.spec.whatwg.org/#shadow-trees)
101 | - [MDN - Using Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
102 | - [Mind the document.activeElement!](https://dev.to/open-wc/mind-the-document-activeelement-2o9a)
103 | - [Open vs. Closed Shadow DOM](https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af)
104 | - [Shadow DOM](https://javascript.info/shadow-dom)
105 | - [Shadow DOM and events](https://javascript.info/shadow-dom-events)
106 | - [Shadow DOM in depth](https://github.com/praveenpuglia/shadow-dom-in-depth)
107 | - [Shadow DOM slots, composition](https://javascript.info/slots-composition)
108 | - [Shadow DOM styling](https://javascript.info/shadow-dom-style)
109 | - [Shadow DOM v1: Self-Contained Web Components](https://web.dev/shadowdom-v1/)
110 | - [The Rise of Shadow DOM](https://medium.com/front-end-hacking/the-rise-of-shadow-dom-84aa1f731e82)
111 | - [Understanding Slot Updates with Web Components](https://coryrylan.com/blog/understanding-slot-updates-with-web-components)
112 | - [What is the Shadow DOM?](https://bitsofco.de/what-is-the-shadow-dom/)
113 | - [Who doesn't love some slots?](https://dev.to/westbrook/who-doesnt-love-some-s-3de0)
114 | - [Your Content in Shadow DOM Portals](https://dev.to/westbrook/your-content-in-shadow-dom-portals-3cdb)
115 | - [web-platform-tests](https://github.com/web-platform-tests/wpt/tree/master/shadow-dom)
116 | 
117 | ### HTML Templates
118 | 
119 | `<template>` element is used to declare fragments of HTML that can be cloned and inserted in the document by script.
120 | 
121 | - [Crafting Reusable HTML Templates](https://css-tricks.com/crafting-reusable-html-templates/)
122 | - [HTML Living Standard: The `template` element](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)
123 | - [HTML templates with vanilla JavaScript](https://gomakethings.com/html-templates-with-vanilla-javascript/)
124 | - [MDN - &lt;template&gt;: The Content Template element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)
125 | - [MDN - Using templates and slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)
126 | - [Template element](https://javascript.info/template-element)
127 | - [Templating in HTML](https://kittygiraudel.com/2022/09/30/templating-in-html/)
128 | - [The HTML5 template element](https://dev.to/ahferroin7/the-html5-template-element-26b6)
129 | - [Understanding The Template Element In HTML](https://blog.openreplay.com/understanding-the-template-element-in-html/)
130 | - [web-platform-tests](https://github.com/web-platform-tests/wpt/tree/master/html/semantics/scripting-1/the-template-element)
131 | 
132 | ### CSS Shadow Parts
133 | 
134 | CSS Shadow Parts allow developers to expose certain elements inside Shadow DOM for styling purposes.
135 | 
136 | - [W3C First Public Working Draft](https://www.w3.org/TR/css-shadow-parts-1/)
137 | - [CSS Shadow Parts are coming!](https://dev.to/webpadawan/css-shadow-parts-are-coming-mi5)
138 | - [MDN - `::part()` CSS pseudo element](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)
139 | - [MDN - `part` global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part)
140 | - [::part and ::theme, an ::explainer](https://meowni.ca/posts/part-theme-explainer/)
141 | - [web-platform-tests](https://github.com/web-platform-tests/wpt/tree/master/css/css-shadow-parts)
142 | 
143 | ## Guides
144 | 
145 | ### Accessibility
146 | 
147 | - [Accessibility for Web Components](https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html)
148 | - [Accessibility with ID Referencing and Shadow DOM](https://coryrylan.com/blog/accessibility-with-id-referencing-and-shadow-dom)
149 | - [Dialogs and shadow DOM: can we make it accessible?](https://nolanlawson.com/2022/06/14/dialogs-and-shadow-dom-can-we-make-it-accessible/)
150 | - [How to Make Accessible Web Components — a Brief Guide](https://www.sitepoint.com/accessible-web-components/)
151 | - [Managing focus in the shadow DOM](https://nolanlawson.com/2021/02/13/managing-focus-in-the-shadow-dom/)
152 | - [The future of accessibility for custom elements](https://robdodson.me/the-future-of-accessibility-for-custom-elements/)
153 | - [The Guide to Accessible Web Components](https://www.erikkroes.nl/blog/accessibility/the-guide-to-accessible-web-components-draft/)
154 | - [Web Components and the Accessibility Object model (AOM)](https://www.24a11y.com/2019/web-components-and-the-aom/)
155 | - [Web Components punch list](https://www.tpgi.com/web-components-punch-list/)
156 | - [Web components still need to be accessible](https://www.24a11y.com/2018/web-components-still-need-to-be-accessible/)
157 | 
158 | ### Best Practices
159 | 
160 | - [Custom Element Best Practices](https://web.dev/custom-elements-best-practices/)
161 | - [Developing Components: Publishing](https://open-wc.org/guides/developing-components/publishing/)
162 | - [Gold Standard Checklist for Web Components](https://github.com/webcomponents/gold-standard/wiki)
163 | - [Guidelines for creating web platform compatible components](https://w3ctag.github.io/webcomponents-design-guidelines/)
164 | - [How to Publish Web Components to NPM](https://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/)
165 | - [Open Web Components Recommendations](https://open-wc.org)
166 | 
167 | ### Codelabs
168 | 
169 | - [Build a Story Web Component with LitElement](https://dev.to/straversi/build-a-story-web-component-with-litelement-e59)
170 | - [Building Custom Elements with Web Components for the 2020 Elections](https://medium.com/stories-from-upstatement/building-custom-elements-with-web-components-for-the-2020-elections-f767ff9e9c6a)
171 | - [Creating Custom Form Controls with ElementInternals](https://css-tricks.com/creating-custom-form-controls-with-elementinternals/)
172 | - [From Web Component to Lit Element](https://codelabs.developers.google.com/codelabs/the-lit-path)
173 | - [HowTo Components –`<howto-checkbox>`](https://web.dev/components-howto-checkbox/)
174 | - [HowTo Components –`<howto-tabs>`](https://web.dev/components-howto-tabs/)
175 | - [HowTo Components – `<howto-tooltip>`](https://web.dev/components-howto-tooltip/)
176 | - [Lit: basics](https://open-wc.org/codelabs/basics/lit-html.html#0)
177 | - [Lit: intermediate](https://open-wc.org/codelabs/intermediate/lit-html.html#0)
178 | - [Lit for React Developers](https://codelabs.developers.google.com/codelabs/lit-2-for-react-devs#0)
179 | - [Web Components: basics](https://open-wc.org/codelabs/basics/web-components.html#0)
180 | 
181 | ### Examples
182 | 
183 | - [generic-components](https://github.com/thepassle/generic-components) - Collection of generic web components with a focus on accessibility, and ease of use.
184 | - [howto-components](https://github.com/GoogleChromeLabs/howto-components) - Collection of web components that implement common web UI patterns.
185 | - [Nude UI](https://github.com/LeaVerou/nudeui) - Collection of accessible, customizable, ultra-light web components.
186 | - [open-wc code examples](https://open-wc.org/guides/developing-components/code-examples/) - Collection of best practices and design patterns for developing web components.
187 | - [vanilla-retro-js](https://github.com/martine-dowden/vanilla-retro-js) - Vanilla JS UI component library of HTML deprecated tags.
188 | - [web-components-examples](https://github.com/mdn/web-components-examples) - Series of web components examples, related to the MDN web components documentation.
189 | 
190 | ## Articles
191 | 
192 | ### Architecture
193 | 
194 | - [A deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontends](https://itnext.io/a-deep-analysis-into-isomorphic-autonomous-cross-framework-usage-microfrontends-364271dc5fa9)
195 | - [Frankenstein Migration: Framework-Agnostic Approach (Part 1)](https://www.smashingmagazine.com/2019/09/frankenstein-migration-framework-agnostic-approach-part-1/)
196 | - [Frankenstein Migration: Framework-Agnostic Approach (Part 2)](https://www.smashingmagazine.com/2019/09/frankenstein-migration-framework-agnostic-approach-part-2/)
197 | - [Generating Config driven Dynamic Forms using Web Components](https://codeburst.io/generating-config-driven-dynamic-forms-using-web-components-7c8d400f7f2e)
198 | - [Hiding internal framework methods and properties from web component APIs](https://component.kitchen/blog/posts/hiding-internal-framework-methods-and-properties-from-web-component-apis)
199 | - [How to deliver Custom Elements](https://medium.com/@WebReflection/how-to-deliver-custom-elements-702fae32d25c)
200 | - [Making Web Components for Different Contexts](https://css-tricks.com/making-web-components-for-different-contexts/)
201 | - [Supporting both automatic and manual registration of custom elements](https://component.kitchen/blog/posts/supporting-both-automatic-and-manual-registration-of-custom-elements)
202 | - [Web Components — the right way](https://equinusocio.dev/blog/web-components-the-right-way/)
203 | 
204 | ### Interoperability
205 | 
206 | - [Advanced Tooling for Web Components](https://css-tricks.com/advanced-tooling-for-web-components/)
207 | - [Custom Elements Everywhere](https://custom-elements-everywhere.com)
208 | - [Custom Elements That Work Anywhere](https://robdodson.me/interoperable-custom-elements/)
209 | - [JavaScript frameworks, meet Web Components](https://www.voorhoede.nl/nl/blog/javascript-frameworks-meet-web-components/)
210 | - [Web Components aren't a framework replacement - they're better than that](https://lamplightdev.com/blog/2020/01/18/web-components-arent-a-framework-replacement-theyre-better-than-that/)
211 | - [Web Components: Seamlessly interoperable](https://medium.com/@sergicontre/web-components-seamlessly-interoperable-82efd6989ca4)
212 | 
213 | ### Limitations
214 | 
215 | - [Beyond the polyfills: how Web Components affect us today?](https://dev.to/webpadawan/beyond-the-polyfills-how-web-components-affect-us-today-3j0a)
216 | - [Custom elements, shadow DOM and implicit form submission](https://www.hjorthhansen.dev/shadow-dom-and-forms/)
217 | - [Form-associated custom elements](https://www.hjorthhansen.dev/shadow-dom-form-participation/)
218 | - [You might not need shadow DOM](https://www.hjorthhansen.dev/you-might-not-need-shadow-dom/)
219 | 
220 | ### Styling
221 | 
222 | - [Does shadow DOM improve style performance?](https://nolanlawson.com/2021/08/15/does-shadow-dom-improve-style-performance/)
223 | - [Eschewing Shadow DOM](https://every-layout.dev/blog/eschewing-shadow-dom/)
224 | - [How Nordhealth uses Custom Properties in Web Components](https://web.dev/custom-properties-web-components/)
225 | - [Options for styling web components](https://nolanlawson.com/2021/01/03/options-for-styling-web-components/)
226 | - [Style scoping versus shadow DOM: which is fastest?](https://nolanlawson.com/2022/06/22/style-scoping-versus-shadow-dom-which-is-fastest/)
227 | - [Styling a Web Component](https://css-tricks.com/styling-a-web-component/)
228 | - [Styling in the Shadow DOM With CSS Shadow Parts](https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/)
229 | - [Thinking Through Styling Options for Web Components](https://css-tricks.com/thinking-through-styling-options-for-web-components/)
230 | - [Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think](https://css-tricks.com/web-component-pseudo-classes-and-pseudo-elements/)
231 | - [Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements](https://css-tricks.com/web-standards-meet-user-land-using-css-in-js-to-style-custom-elements/)
232 | 
233 | ## Real World
234 | 
235 | ### Case Studies
236 | 
237 | - [Apple Just Shipped Web Components to Production and You Probably Missed It](https://dev.to/ionic/apple-just-shipped-web-components-to-production-and-you-probably-missed-it-57pf)
238 | - [Bringing Order to Web Design Chaos (with Web Components)](https://dev.to/thatjoemoore/bringing-order-to-web-design-chaos--3fhb)
239 | - [Get moving with Microsoft’s FAST web components](https://www.infoworld.com/article/3618410/get-moving-with-microsofts-fast-web-components.html)
240 | - [How Web Components Are Used at GitHub and Salesforce](https://thenewstack.io/how-web-components-are-used-at-github-and-salesforce/)
241 | - [How we use Web Components at GitHub](https://github.blog/2021-05-04-how-we-use-web-components-at-github/)
242 | - [Implementing a Design Language System with Stencil.js](https://medium.com/@Danetag/implementing-a-design-language-system-with-stencil-js-515432918eb5)
243 | - [ING ❤ Web Components](https://dev.to/thepassle/ing--web-components-aef)
244 | - [ING Open-Sources Lion, Its White-Label Web Component Library – Q&A with Thomas Allmer](https://www.infoq.com/articles/ing-open-sources-lion-web-component/)
245 | - [Lessons Learned, making our app with Web Components](https://medium.com/samsung-internet-dev/lessons-learned-making-our-app-with-web-components-bf55379cfcda)
246 | - [Looking back on five years of web components](https://bitworking.org/news/2019/07/looking-back-on-five-years-of-web-components)
247 | - [Shipping Web Components in 2020](https://dev.to/joe8bit/shipping-web-components-in-2020-2h54)
248 | - [The Firefox UI is now built with Web Components](https://briangrinstead.com/blog/firefox-webcomponents/)
249 | - [Using web components to encapsulate CSS and resolve design system conflicts](https://about.gitlab.com/blog/2021/05/03/using-web-components-to-encapsulate-css-and-resolve-design-system-conflicts/)
250 | - [Web Components at GitHub - Web Components SF Meetup](https://www.infoq.com/news/2020/08/web-components-sf-meetup-2020/)
251 | - [Web Components at Scale at Salesforce: Challenges Encountered, Lessons Learnt](https://www.infoq.com/news/2020/03/web-components-salesforce-lwc/)
252 | - [Web Development At Scale: Composable Applications With Web Components](https://medium.com/@jarrodek/composable-applications-with-web-components-ebe5158387be)
253 | - [web.dev engineering blog #1: How we build the site and use Web Components](https://web.dev/how-we-build-webdev-and-use-web-components/)
254 | 
255 | ### Components
256 | 
257 | - [`<active-table>`](https://github.com/OvidijusParsiunas/active-table) - Editable table web component.
258 | - [`<api-viewer>`](https://github.com/web-padawan/api-viewer-element) - API documentation and live playground for Web Components.
259 | - [`<chess-board>`](https://github.com/justinfagnani/chessboard-element) - Standalone chess board web component.
260 | - [`<css-doodle>`](https://github.com/css-doodle/css-doodle) - Web component for drawing patterns with CSS.
261 | - [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle) - Custom element that allows to create a dark mode toggle or switch.
262 | - [`<deep-chat>`](https://github.com/OvidijusParsiunas/deep-chat) - Web component for chat with AI capabilities.
263 | - [`<emoji-picker>`](https://github.com/nolanlawson/emoji-picker-element) - Lightweight emoji picker, distributed as a web component.
264 | - [`<fg-modal>`](https://github.com/filamentgroup/fg-modal) - Accessible modal dialog web component.
265 | - [`<file-viewer>`](https://github.com/avipunes/file-viewer) - Web component built with Svelte to view files.
266 | - [`<json-viewer>`](https://github.com/alenaksu/json-viewer) - Web component to visualize JSON data in a tree view.
267 | - [`<lite-youtube>`](https://github.com/paulirish/lite-youtube-embed) - Lite YouTube embed with a focus on visual performance.
268 | - [`<midi-player>`](https://github.com/cifkao/html-midi-player) - MIDI file player and visualizer web components.
269 | - [`<model-viewer>`](https://github.com/google/model-viewer) - Web component for rendering interactive 3D models.
270 | - [`<player-x>`](https://github.com/playerxo/playerx) - Media player web component.
271 | - [`<progressive-image>`](https://github.com/andreruffert/progressive-image-element) - Custom element to progressively enhance image placeholders.
272 | - [`<qr-code>`](https://github.com/bitjson/qr-code) – Web component for rendering customizable, animate-able, SVG-based QR codes.
273 | - [`<range-slider>`](https://github.com/andreruffert/range-slider-element) - Accessible range slider custom element with keyboard support.
274 | - [`<rapi-doc>`](https://github.com/mrin9/RapiDoc) - Web component for creating documentation from OpenAPI Specification.
275 | - [`<shader-doodle>`](https://github.com/halvves/shader-doodle) - Web component for writing and rendering shaders.
276 | - [`<theme-switch>`](https://github.com/mahozad/theme-switch) - Animated toggle button to switch between light, dark, and system theme.
277 | - [`<trix-editor>`](https://github.com/basecamp/trix) - Rich text editor custom element for everyday writing.
278 | - [`<vime-player>`](https://github.com/vime-js/vime) - Customizable, extensible, accessible and framework agnostic media player.
279 | - [`<web-vitals>`](https://github.com/stefanjudis/web-vitals-element) - Bring [web vitals](https://github.com/GoogleChrome/web-vitals) quickly into your page using custom elements.
280 | 
281 | ### Component Libraries
282 | 
283 | - [AMP](https://github.com/ampproject/amphtml) - Web component framework for easily creating user-first websites, stories, ads, emails and more.
284 | - [AnywhereUI](https://github.com/adaleks/anywhere-ui) - Collection of rich web components that includes framework bindings. Created with StencilJS.
285 | - [Apollo Elements](https://github.com/apollo-elements/apollo-elements) - Custom elements for using Apollo GraphQL with various web components libraries.
286 | - [AXA Pattern Library](https://github.com/axa-ch-webhub-cloud/pattern-library) - AXA CH UI components library built with Web Components.
287 | - [Blackstone UI](https://github.com/kjantzer/bui) - Web components for creating interfaces by Blackstone Publishing.
288 | - [Blaze UI Atoms](https://github.com/BlazeSoftware/atoms) - Set of web components powered by Blaze CSS.
289 | - [Brightspace UI core](https://github.com/BrightspaceUI/core) - Collection of web components for building Brightspace applications.
290 | - [Clever components](https://github.com/CleverCloud/clever-components) - Collection of Web Components made by Clever Cloud.
291 | - [Curvenote](https://github.com/curvenote/article) - Web components for creating interactive scientific articles.
292 | - [DataFormsJS](https://github.com/dataformsjs/dataformsjs) - Standalone Components for SPA routing, displaying data from web services, and more.
293 | - [Dile Components](https://github.com/Polydile/dile-components) - General use Web Components for websites and applications.
294 | - [elements-sk](https://github.com/google/elements-sk) - Collection of custom elements for "a la carte" web development.
295 | - [github-elements](https://github.com/github/github-elements) - GitHub's Web Component collection.
296 | - [Elix](https://github.com/elix/elix) - High-quality, customizable web components for common user interface patterns.
297 | - [Furo Webcomponents](https://github.com/eclipse/eclipsefuro-web) - Enterprise ready set of web components which work best with Eclipse Furo.
298 | - [Fusion Web Components](https://github.com/equinor/fusion-web-components) - Ser of web components used by Equinor Fusion.
299 | - [Ignite UI Web Components](https://github.com/IgniteUI/igniteui-webcomponents) - Complete library of UI components from Infragistics.
300 | - [Immersive Custom Elements](https://github.com/MozillaReality/immersive-custom-elements) - Set of web components for embedding immersive (VR & AR) content.
301 | - [Joomla UI custom elements](https://github.com/joomla-projects/custom-elements) - Compilation of Joomla 4 Custom Elements.
302 | - [Ketch.UP](https://github.com/smeup/ketchup) - Web components library for Sme.UP.
303 | - [LDRS](https://github.com/GriffinJohnston/ldrs) - Lightweight, customizable loading animations/spinners.
304 | - [Lion Web Components](https://github.com/ing-bank/lion) - Set of highly performant, accessible and flexible Web Components.
305 | - [LRNWebComponents](https://github.com/elmsln/lrnwebcomponents/) - ELMS:LN produced web components for any project.
306 | - [Lume](https://github.com/lume/lume) - Custom elements for defining 2D or 3D scenes rendered with CSS3D or WebGL.
307 | - [Medblocks UI](https://github.com/medblocks/medblocks-ui) - Web Components for rapid development of openEHR and FHIR systems.
308 | - [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit) - Collection of web components for the Microsoft Graph.
309 | - [Mutation testing elements](https://github.com/stryker-mutator/mutation-testing-elements) - A schema for mutation testing results with the web components to visualize it.
310 | - [Nightingale](https://github.com/ebi-webcomponents/nightingale) - Data visualisation web components for the life sciences.
311 | - [Nuxeo Elements](https://github.com/nuxeo/nuxeo-elements) - Components for building web applications with Nuxeo using Web Components.
312 | - [One Platform Components](https://github.com/1-Platform/op-components) - Set of web components for Red Hat One Platform.
313 | - [Open Business Application Platform Web Components](https://github.com/openbap/obap-elements) - Collection of web components designed for business applications.
314 | - [Pixano Elements](https://github.com/pixano/pixano-elements) - Re-usable web components dedicated to data annotation tasks.
315 | - [Playground Elements](https://github.com/PolymerLabs/playground-elements) - Serverless code experiences with web components.
316 | - [Shoelace](https://github.com/shoelace-style/shoelace) - A forward-thinking library of web components.
317 | - [Smart Web Components](https://github.com/HTMLElements/smart-webcomponents) - Web components for business applications.
318 | - [Stripe Elements](https://github.com/bennypowers/stripe-elements) - Custom Element Wrapper for Stripe.js v3 Elements.
319 | - [TEI Publisher Components](https://github.com/eeditiones/tei-publisher-components) - Collection of web components used by TEI Publisher and apps generated by it.
320 | - [Titanium Elements](https://github.com/LeavittSoftware/titanium-elements) - Collection of lightweight web components used by Leavitt Group Enterprises.
321 | - [Tradeshift Elements](https://github.com/Tradeshift/elements) - Reusable Tradeshift UI Components as Web Components.
322 | - [TrendChart Elements](https://github.com/WebLogin/trendchart-elements) - Components to generate simple, light and responsive charts.
323 | - [Umbraco UI Components](https://github.com/umbraco/Umbraco.UI) - Collection of user interface web components for Umbraco CMS.
324 | - [Vaadin components](https://github.com/vaadin/web-components) - Evolving set of high-quality web components for building business web applications.
325 | - [VSCode Webview Elements](https://github.com/bendera/vscode-webview-elements) - Components for creating VSCode extensions which use the Webview API.
326 | - [Warp View](https://github.com/senx/warpview) - Collection of charting web components for Warp 10.
327 | - [Webmarkets web components](https://github.com/Webmarkets/wm-web-components) - Set of Webmarkets' public web components.
328 | - [Wired Elements](https://github.com/wiredjs/wired-elements) - Set of common UI elements with a hand-drawn, sketchy look.
329 | - [Wokwi Elements](https://github.com/wokwi/wokwi-elements) - Web Components for Arduino and various electronic parts.
330 | - [XWeather](https://github.com/kherrick/x-weather) - Collection of web components implementing portions of the OpenWeatherMap API.
331 | 
332 | ### Design Systems
333 | 
334 | - [Astro Space UX Design System](https://github.com/RocketCommunicationsInc/astro) - Set of components to build rich space app experiences with established interaction patterns.
335 | - [Auro Design System](https://auro.alaskaair.com) - Alaska Airlines design system to innovate on ideas and collaborate on the future.
336 | - [Blueprint UI](https://blueprintui.dev) - Web Component based design system with flexible and lightweight components.
337 | - [Bolt Design System](https://github.com/boltdesignsystem/bolt) - Twig and Web Component-powered UI components, reusable visual styles and tooling.
338 | - [Calcite Components](https://github.com/Esri/calcite-components) - Shared Web Components for Esri's Calcite design framework.
339 | - [Carbon Web Components](https://github.com/carbon-design-system/carbon-web-components) - Carbon Design System variant on top of Web Components.
340 | - [Clarity Core Web Components](https://github.com/vmware-clarity/core/tree/main/projects/core) - Suite of web components from the Clarity Design System.
341 | - [Crayons](https://github.com/freshdesk/crayons) - Collection of web components that adheres to the Freshworks Design System.
342 | - [FAST Components](https://github.com/microsoft/fast/tree/master/packages/web-components) - Library of Web Components based on the FAST design language.
343 | - [Fluent UI Web Components](https://github.com/microsoft/fluentui/tree/master/packages/web-components) - Library of Web Components that supports Microsoft's Fluent design language.
344 | - [Forge Components](https://github.com/tyler-technologies-oss/forge) - Library of Web Components adhering to the Forge Design System.
345 | - [GOV.UK Web Components](https://github.com/tgreyuk/govuk-webcomponents) - Set of encapsulated web components consuming the GOV.UK Design System.
346 | - [Helix UI](https://github.com/HelixDesignSystem/helix-ui) - Web Component library for the Helix Design System.
347 | - [Liquid](https://github.com/emdgroup-liquid/liquid) - UI component library based on the Liquid Design System.
348 | - [Lyne Components](https://github.com/lyne-design-system/lyne-components) - Building blocks of the Lyne Design System are based on Web Components.
349 | - [Material Web Components](https://github.com/material-components/material-web) - Material Design implemented as Web Components.
350 | - [Momentum UI Web Components](https://github.com/momentum-design/momentum-ui/tree/master/web-components) - Set of UI components based on Momentum Design.
351 | - [Nord](https://nordhealth.design) - Nordhealth’s design system for products, digital experiences and brand.
352 | - [NuML | NUDE Elements](https://github.com/tenphi/numl) - HTML Framework and Design System based on Web Components and runtime CSS generation.
353 | - [OutlineJS](https://github.com/phase2/outline) - Web component based design system starter kit.
354 | - [PatternFly Elements](https://github.com/patternfly/patternfly-elements) - Collection of flexible and lightweight Web Components based on the Unified Design Kit.
355 | - [Pharos Design System](https://github.com/ithaka/pharos) - JSTOR's design system to create cohesive, supportive, and beautiful experiences.
356 | - [Red Hat Design System](https://github.com/RedHat-UX/red-hat-design-system) - Web components for building uniform experiences with the Red Hat brand.
357 | - [Siemens iX Web Components](https://github.com/siemens/ix/tree/main/packages/core) - Web Components implementing Siemens iX design system.
358 | - [Spectrum Web Components](https://github.com/adobe/spectrum-web-components) - Adobe Spectrum design language implementation built with Web Components.
359 | - [UI5 Web Components](https://github.com/SAP/ui5-webcomponents) - Set of reusable UI elements implementing SAP Fiori Design Guidelines.
360 | - [U-M Library Design System](https://design-system.lib.umich.edu) - University of Michigan Library Design System.
361 | - [Zooplus web components](https://github.com/zooplus/zoo-web-components) - Set of web components that implement Z+ shop style guide.
362 | 
363 | ### Use Cases
364 | 
365 | - [How we chose to build our Design System using StencilJS Web Components](https://medium.com/8451/how-we-chose-to-build-our-design-system-using-stenciljs-web-components-4878c36743c5)
366 | - [How searching for a bundle-free React led me to web components](https://www.bryanbraun.com/2020/08/31/how-searching-for-a-bundle-free-react-led-me-to-web-components/)
367 | - [Reasons Web Components are perfect for a big company](https://medium.com/@sergicontre/reasons-web-components-are-perfect-for-a-big-company-28790d712ad5)
368 | - [5 Reasons Web Components Are Perfect for Design Systems](https://ionicframework.com/blog/5-reasons-web-components-are-perfect-for-design-systems/)
369 | - [Web components: the secret ingredient helping power the web](https://web.dev/web-components-io-2019/)
370 | - [Web Components for Enterprise. Part 1: Salesforce, Oracle, SAP](https://dev.to/webpadawan/web-components-for-enterprise-part-1-salesforce-oracle-sap-e70)
371 | - [Web Components for Enterprise. Part 2: Nuxeo, Ionic, Vaadin](https://dev.to/webpadawan/web-components-for-enterprise-part-2-nuxeo-ionic-vaadin-22l7)
372 | - [Why I use Web Components - My use cases](https://dev.to/shihn/why-i-use-web-components-my-use-cases-1nip)
373 | - [Why we use Web Components](https://viljamis.com/2019/why-we-use-web-components/) by [@viljamis](https://twitter.com/viljamis)
374 | - [Why we use Web Components](https://dev.to/ionic/why-we-use-web-components-2c1i) by [@maxlynch](https://twitter.com/maxlynch)
375 | 
376 | ## Libraries
377 | 
378 | ### Class Based
379 | 
380 | - [DNA](https://github.com/chialab/dna) - Progressive Web Components library.
381 | - [element-js](https://github.com/webtides/element-js) - Simple and lightweight base classes for web components with a beautiful API.
382 | - [FAST Element](https://github.com/microsoft/fast/tree/master/packages/web-components/fast-element) - Lightweight library for building performant, memory-efficient, standards-compliant Web Components.
383 | - [Forge Core](https://github.com/tyler-technologies-oss/forge-core) - Building blocks and utilities that are used when building Forge Web Components.
384 | - [Joist](https://github.com/joist-framework/joist) - Set of small libraries designed to add the bare minimum to web components to make you productive.
385 | - [Lit](https://lit.dev) - Simple library for building fast, lightweight web components.
386 | - [Lightning Web Components](https://github.com/salesforce/lwc) - blazing fast, enterprise-grade Web Components foundation.
387 | - [Omi](https://github.com/Tencent/omi) - Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).
388 | - [Panel](https://github.com/mixpanel/panel) - Web Components + Virtual DOM: web standards for powerful UIs.
389 | - [slim.js](https://github.com/slimjs/slim.js) - Fast & Robust Front-End Micro-framework based on modern standards.
390 | - [Stencil](https://github.com/ionic-team/stencil) - Compiler for generating Web Components.
391 | - [Tonic](https://github.com/optoolco/tonic) - Minimalist, stable, audit friendly component framework.
392 | - [WebCell](https://github.com/EasyWebApp/WebCell) - Web Components engine based on VDOM, JSX, MobX & TypeScript.
393 | 
394 | ### Functional
395 | 
396 | - [atomico](https://github.com/atomicojs/atomico) - Small library for the creation of interfaces based on web components using functions and hooks.
397 | - [haunted](https://github.com/matthewp/haunted) - React's Hooks API implemented for web components.
398 | - [hybrids](https://github.com/hybridsjs/hybrids) - UI library for creating Web Components with simple and functional API.
399 | - [Solid Element](https://github.com/solidjs/solid/tree/main/packages/solid-element) - Library that extends Solid adding Custom Web Components and extensions.
400 | 
401 | ### Integrations
402 | 
403 | - [ember-custom-elements](https://github.com/Ravenstine/ember-custom-elements) - Render Ember and Glimmer components using custom elements.
404 | - [preact-custom-element](https://github.com/preactjs/preact-custom-element) - Generate/register a custom element from a preact component.
405 | - [@adobe/react-webcomponent](https://github.com/adobe/react-webcomponent) - Automate the wrapping of a React component in a custom element.
406 | - [nuxt-custom-elements](https://github.com/GrabarzUndPartner/nuxt-custom-elements) - Export your project components as custom elements for integration into external pages.
407 | - [react-shadow](https://github.com/Wildhoney/ReactShadow) - Utilise Shadow DOM in React with all the benefits of style encapsulation.
408 | - [reactify-wc](https://github.com/BBKolton/reactify-wc) - Use web components with React properties and functions.
409 | - [remount](https://github.com/rstacruz/remount) - Mount React components to the DOM using custom elements.
410 | - [@riotjs/custom-elements](https://github.com/riot/custom-elements) - Simple API to create vanilla custom elements with Riot.js.
411 | 
412 | ### Benchmarks
413 | 
414 | - [All the Ways to Make a Web Component](https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/)
415 | - [web-components-benchmark](https://vogloblinsky.github.io/web-components-benchmark/) - Benchmark Web Components technologies with various examples.
416 | - [web-components-todo](https://wc-todo.firebaseapp.com/) - The same todo application built in different Web Components libraries for benchmark purpose.
417 | 
418 | ## Frameworks
419 | 
420 | ### Angular
421 | 
422 | - [Angular Elements Overview](https://angular.io/guide/elements)
423 | - [Building and consuming Angular Elements as Web Components](https://indepth.dev/building-and-bundling-web-components/)
424 | - [How to use Angular ngModel and ngForms with WebComponents](https://itnext.io/how-to-use-angular-ngmodel-and-ngforms-with-webcomponents-802bd9e1d3d7)
425 | - [Using Web Components in Angular](https://coryrylan.com/blog/using-web-components-in-angular)
426 | - [Web Components With Angular Ivy In 6 Steps](https://www.softwarearchitekt.at/post/2019/05/18/web-components-custom-elements-with-angular-ivy-in-6-steps.aspx)
427 | 
428 | ### React
429 | 
430 | - [3 Approaches to Integrate React with Custom Elements](https://css-tricks.com/3-approaches-to-integrate-react-with-custom-elements/)
431 | - [Building Interoperable Web Components That Even Work With React](https://css-tricks.com/building-interoperable-web-components-react/)
432 | - [Rendering React Components With Custom Elements](https://guillaumebriday.fr/rendering-react-components-with-custom-elements)
433 | - [How to use Web Components in React](https://www.robinwieruch.de/react-web-components)
434 | - [Using Web Components With Next (or Any SSR Framework)](https://css-tricks.com/using-web-components-with-next-or-any-ssr-framework/)
435 | 
436 | ### Vue
437 | 
438 | - [Using Web Components in Vue](https://coryrylan.com/blog/using-web-components-in-vue)
439 | 
440 | ### Svelte
441 | 
442 | - [Svelte Custom Element API](https://svelte.dev/docs#Custom_element_API)
443 | - [How to Create a Web Component in Svelte](https://dev.to/silvio/how-to-create-a-web-components-in-svelte-2g4j)
444 | - [Svelte Web Component — 5.4KB](https://itnext.io/svelte-web-component-5-4kb-4afe46590d99)
445 | 
446 | ## Ecosystem
447 | 
448 | ## Meta Frameworks
449 | 
450 | - [AMP](https://github.com/ampproject/amphtml) - Web component framework to easily create user-first experiences for the web.
451 | - [Enhance](https://enhance.dev/docs/) - Web standards-based HTML framework for building lightweight web applications.
452 | - [luna-js](https://github.com/webtides/luna-js) - SSR framework that makes working with the WebComponents standard a breeze.
453 | - [Rocket](https://rocket.modern-web.dev) - Modern web setup for static sites with a sprinkle of JavaScript.
454 | - [Web Components Compiler](https://github.com/ProjectEvergreen/wcc) - Compiler to make server-side rendering of native web components easier.
455 | - [WebC](https://github.com/11ty/webc) - Framework-independent standalone HTML serializer for generating markup for web components.
456 | 
457 | ### Starter Kits
458 | 
459 | - [Create Open Web Components](https://open-wc.org/docs/development/generator/) - Web component project scaffolding.
460 | - [custom-element-boilerplate](https://github.com/github/custom-element-boilerplate) - Boilerplate for creating a custom element.
461 | - [hello-web-components](https://github.com/fernandopasik/hello-web-components) - Simple starter hello world web component written in TypeScript.
462 | - [nutmeg](https://github.com/abraham/nutmeg) - Build, test, and publish vanilla Web Components with a little spice.
463 | 
464 | ### Testing Solutions
465 | 
466 | - [capybara-shadowdom](https://github.com/yuki24/capybara-shadowdom) - Ruby gem that adds basic support for the Shadow DOM to Capybara.
467 | - [Cypress component tests for Lit](https://dev.to/simonireilly/cypress-component-tests-for-lit-elements-web-components-45oj) - How to run component tests for a Lit web component with Cypress.
468 | - [cypress-lit](https://github.com/simonireilly/cypress-lit) - Test your Lit elements and native web components in Cypress with all the modern browsers.
469 | - [Developing Components: Testing](https://open-wc.org/guides/developing-components/testing/) - Using @web/test-runner for testing web components in a real browser.
470 | - [How To Automate Shadow DOM In Selenium WebDriver](https://www.lambdatest.com/blog/shadow-dom-in-selenium/) - Locating Shadow DOM elements using Selenium WebDriver in a Maven project.
471 | - [Native Automation support for Shadow DOM](https://staleelement.medium.com/native-automation-support-for-shadow-dom-with-webdriverio-and-cypress-chapter-3-26249a589f5e) - Shadow DOM and open-source testing frameworks.
472 | - [Open Web Components: Testing](https://open-wc.org/docs/testing/testing-package/) - Opinionated package that combines and configures testing libraries.
473 | - [query-selector-shadow-dom](https://github.com/webdriverio/query-selector-shadow-dom) - querySelector that can pierce Shadow DOM roots, useful for automated testing.
474 | - [shadow-automation-selenium](https://github.com/sukgu/shadow-automation-selenium) - Shadow DOM automation using Selenium.
475 | - [Testing Shadow DOM elements in Selenium](https://reflect.run/articles/testing-shadow-dom-elements-in-selenium/) - In Selenium 4, there is now a way to access Shadow DOM nodes.
476 | - [Test web components with Playwright](https://alexbilson.dev/plants/technology/test-web-components-with-playwright/) - So you’ve created a native web component or two. How do you test them in popular browsers?
477 | - [W3C Webdriver conquering automation of Shadow DOM](https://staleelement.medium.com/w3c-webdriver-conquering-automation-of-shadow-dom-chapter-2-d92c7fe9e74c) - Shadow DOM tree and its interaction with the W3C Webdriver.
478 | 
479 | ### Tools
480 | 
481 | - [Backlight](https://backlight.dev/) — 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.
482 | - [Custom Elements Locator](https://github.com/open-wc/locator) - Chrome extension to find custom elements on a page.
483 | - [@storybook/web-components](https://www.npmjs.com/package/@storybook/web-components) - UI development environment for plain web-component snippets.
484 | - [webcomponents.dev](https://webcomponents.dev) - Component IDE for web platform developers.
485 | - [web-component-analyzer](https://github.com/runem/web-component-analyzer) - CLI that analyzes web components and emits documentation / diagnostics.
486 | - [Web Components Codemods](https://github.com/kcmr/web-components-codemods) - Codemods for Web Components.
487 | 
488 | ## Books
489 | 
490 | - [Web Components in Action](https://www.manning.com/books/web-components-in-action) - Book by Ben Farrell, available at Manning early release program.
491 | - [Web Component Essentials](https://leanpub.com/web-component-essentials) - Book by Cory Rylan, early preview edition available at Leanpub.
492 | 
493 | ## Tutorials
494 | 
495 | - [Building Web Components with Vanilla JavaScript](https://dev.to/aspittel/building-web-components-with-vanilla-javascript--jho)
496 | - [Creating a Custom Element from Scratch](https://css-tricks.com/creating-a-custom-element-from-scratch/)
497 | - [Creating a Reusable Avatar Web Component](https://marcoslooten.com/blog/creating-a-reusable-avatar-web-component/)
498 | - [Creating Web Components with Stencil](https://auth0.com/blog/creating-web-components-with-stencil/)
499 | - [Encapsulating Style and Structure with Shadow DOM](https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/)
500 | - [Getting started with LitElement and TypeScript](https://labs.thisdot.co/blog/getting-started-with-litelement-and-typescript)
501 | - [Web Components: from zero to hero](https://dev.to/thepassle/web-components-from-zero-to-hero-4n4m)
502 | - [Deep Dive: Web Components & Dependency Injection – The Experiment](https://www.thinktecture.com/web-components/dependency-injection/)
503 | - [Handling data with Web Components](https://itnext.io/handling-data-with-web-components-9e7e4a452e6e)
504 | - [How to use D3js with WebComponents](https://towardsdatascience.com/how-to-use-d3js-with-webcomponents-a75ae4f980de)
505 | - [Navigation Lifecycle using Vaadin Router, LitElement and TypeScript](https://labs.thisdot.co/blog/navigation-lifecycle-using-vaadin-router-litelement-and-typescript)
506 | - [Recreating The Arduino Pushbutton Using SVG And `<lit-element>`](https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg/)
507 | - [Routing Management with LitElement and TypeScript](https://labs.thisdot.co/blog/routing-management-with-litelement)
508 | - [Snake-Eating Game Making with Web Components of Omi and MVP Architecture](https://dev.to/dntzhang/snake-eating-game-making-with-web-components-of-omi-and-mvp-architecture-206)
509 | - [Stencil – Web Components On Steroids](https://www.thinktecture.com/web-components/stenciljs-web-components-on-steroids/)
510 | - [Using Modern Web Components](https://coryrylan.com/blog/using-modern-web-components)
511 | - [Using Web Components in WordPress is Easier Than You Think](https://css-tricks.com/using-web-components-in-wordpress-is-easier-than-you-think/)
512 | - [Web Components 101: Framework Comparison](https://coderpad.io/blog/development/web-components-101-framework-comparison/)
513 | - [Web Components 101: Lit Framework](https://coderpad.io/blog/development/web-components-101-lit-framework/)
514 | - [Web Components Tools: A Comparison](https://www.nexmo.com/blog/2020/05/20/web-components-tools-a-comparison)
515 | - [Where to begin building Web Components? - The Basics](https://dev.to/alangdm/where-to-begin-building-web-components-the-basics-3b78)
516 | - [Where to begin building Web Components? - Class-based Libraries](https://dev.to/alangdm/where-to-begin-building-web-components-class-based-libraries-18m6)
517 | 
518 | ## Insights
519 | 
520 | ### Podcasts
521 | 
522 | - [Code[ish], episode 38: Building with Web Components](https://www.heroku.com/podcasts/codeish/38-building-with-web-components)
523 | - [Frontend Happy Hour, episode 62: Web Components - shots of shadow DOM](https://frontendhappyhour.com/episodes/web-components-shots-of-shadow-dom/)
524 | - [Labs Talk - Web Components with Peter Muessig](https://labstalk.buzzsprout.com/993481/3932975-web-components-with-peter-muessig)
525 | - [Real Talk JavaScript, episode 7: Custom Web Components with Rob Wormald](https://realtalkjavascript.simplecast.fm/eaf3db9e)
526 | - [Real Talk JavaScript, episode 101: Back to Basics with Native HTML and LitElement](https://realtalkjavascript.simplecast.com/episodes/episode-101-back-to-basics-with-native-html-and-litelement)
527 | 
528 | ### Presentations
529 | 
530 | - [Are Web Components the Betamax of web development?](https://noti.st/lostinbrittany/EjUZyd/are-web-components-the-betamax-of-web-development) by [@lostinbrittany](https://twitter.com/lostinbrittany)
531 | - [Designing Standard Systems](https://drive.google.com/file/d/1ALFiWOFU0UAGUpaZPMIVnoADs9_REtL5/view) by [@stefsull](https://twitter.com/stefsull) and [@bferrua](https://twitter.com/bferrua)
532 | - [Frontend Architecture for Scalable Design Systems](https://events.drupal.org/seattle2019/sessions/design-system-architecture-pattern-lab-twig-and-web-components) by [@salem_cobalt](https://twitter.com/salem_cobalt)
533 | - [lit-apollo: Data-Driven Components that Use the Platform](https://apolloelements.dev/using-lit-apollo/) by [@PowersBenny](https://twitter.com/PowersBenny)
534 | - [Mastering Shadow DOM](https://martine-dowden.github.io/portfolio/presentation/mastering-shadow-dom) by [@Martine_Dowden](https://twitter.com/Martine_Dowden)
535 | - [Modernizing Large Frontends with Web Components](https://speakerdeck.com/samjulien/modernizing-large-frontends-with-web-components) by [@samjulien](https://twitter.com/samjulien)
536 | - [Shadow DOM: off the beaten track](https://docs.google.com/presentation/d/1wi74YiTLtLSfgjyccKm5LxYp9k8aeJda0AekWV5mqJI/edit?usp=sharing) by [@serhiikulykov](https://twitter.com/serhiikulykov)
537 | - [Using Web Components to Build a Framework-agnostic UI Library](https://gotochgo.com/2019/sessions/866/using-web-components-to-build-a-framework-agnostic-ui-library) by [@brianbouril](https://twitter.com/brianbouril) and [@danciupuliga](https://twitter.com/danciupuliga)
538 | - [Web Components and the AOM](https://decks.tink.uk/2019/jsconf/index.html) by [@LeonieWatson](https://twitter.com/LeonieWatson)
539 | - [Web Components and Styles Scoping](https://www.dropbox.com/s/wdh9uufjui5htll/Web-Components-and-Styles-Scoping-by-bashmish-FrontMania-2018.pdf) by [@bashmish](https://twitter.com/bashmish)
540 | - [Web Components can do that?!](https://slides.com/vogloblinsky/web-components-can-do-that) by [@vogloblinsky](https://twitter.com/vogloblinsky)
541 | - [Web Components: Introduction and State of the Art](https://webcomponents.dev/blog/web-components-slides/) by [@webcomp_dev](https://twitter.com/webcomp_dev)
542 | 
543 | ### Talks
544 | 
545 | - [Better Apps: Delivering Universal UI Patterns as Web Components](https://youtu.be/mtHf7crZZIQ) by [@janmiksovsky](https://twitter.com/janmiksovsky)
546 | - [Custom Web Shadow Elements, or Whatever…](https://vimeo.com/364370506) by [@aerotwist](https://twitter.com/aerotwist)
547 | - [Styling and Theming Web Components](https://youtu.be/FM7ROEVPA4k) by [@justinfagnani](https://twitter.com/justinfagnani)
548 | - [Web Components at Enterprise Scale](https://youtu.be/iFp-P2UJT_Y) by [@diervo](https://twitter.com/diervo)
549 | 
550 | ## Usage Metrics
551 | 
552 | - [Chrome Platform Status: `CustomElementRegistryDefine`](https://chromestatus.com/metrics/feature/timeline/popularity/1689)
553 | - [Chrome Platform Status: `ElementAttachShadow`](https://chromestatus.com/metrics/feature/timeline/popularity/804)
554 | - [Chrome Platform Status: `HTMLTemplateElement`](https://chromestatus.com/metrics/feature/timeline/popularity/2769)
555 | 
556 | ## Proposals
557 | 
558 | ### Form-associated Custom Elements
559 | 
560 | - [Form Participation API Explained](https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit?usp=sharing) - Document by Google Chrome team.
561 | - [Form-associated custom elements](https://www.chromestatus.com/features/4708990554472448) - Feature in Chrome platform status.
562 | - [web-platform-tests](https://github.com/web-platform-tests/wpt/tree/master/custom-elements/form-associated)
563 | 
564 | ### Constructable Stylesheet Objects
565 | 
566 | - [Specification Draft](https://wicg.github.io/construct-stylesheets/)
567 | - [web-platform-tests](https://github.com/web-platform-tests/wpt/blob/master/css/cssom/CSSStyleSheet-constructable.html)
568 | - [Explainer](https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md)
569 | - [Constructable Stylesheets](https://www.chromestatus.com/feature/5394843094220800) - Feature in Chrome platform status.
570 | 
571 | ### Custom State Pseudo Class
572 | 
573 | - [Blink: Intent to implement](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/CApU9QIu3TM)
574 | - [`ElementInternals`'s `states` property and the `:state()` pseudo class](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/custom-states-and-state-pseudo-class.md)
575 | 
576 | ## Miscellaneous
577 | 
578 | - [bruck](https://github.com/Heydon/bruck) - Prototyping system built with web components and the Houdini Paint API.
579 | - [Vaadin Directory](https://vaadin.com/directory) - Publish, discuss and rate web components
580 | - [webcomponents.org](http://webcomponents.org/) - Discuss &amp; share web components.
581 | 
582 | ## Archive
583 | 
584 | ### Polyfills
585 | 
586 | Modern browsers supports web components standards without any of the polyfills listed below.
587 | The only notable exception is that customized built-in elements are rejected by WebKit (Safari).
588 | 
589 | #### Custom Elements polyfills
590 | 
591 | - [@webcomponents/custom-elements](https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements) - Custom Elements polyfill by Polymer team.
592 | - [document-register-element](https://github.com/WebReflection/document-register-element) - Custom Elements polyfill by Andrea Giammarchi.
593 | 
594 | #### Customized Built-in Elements polyfills
595 | 
596 | - [@corpuscule/custom-builtin-elements](https://github.com/corpusculejs/custom-builtin-elements) - Customized built-in elements polyfill by [CorpusculeJS](https://github.com/corpusculejs).
597 | - [@ungap/custom-elements-builtin](https://github.com/ungap/custom-elements-builtin) - Customized built-in elements polyfill by [ungap project](https://ungap.github.io).
598 | 
599 | #### Shadow DOM shims
600 | 
601 | - [@webcomponents/shadydom](https://github.com/webcomponents/polyfills/tree/master/packages/shadydom) - ShadowDOM v1 shim.
602 | - [@webcomponents/shadycss](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss) - ShadowDOM style encapsulation shim.
603 | - [@lwc/synthetic-shadow](https://github.com/salesforce/lwc/blob/master/packages/@lwc/synthetic-shadow) - Shadow DOM polyfill by [LWC](https://lwc.dev).
604 | 
605 | #### HTML Templates polyfills
606 | 
607 | - [@webcomponents/template](https://github.com/webcomponents/polyfills/tree/master/packages/template) - Minimal polyfill for `<template>`.
608 | - [@ungap/import-node](https://github.com/ungap/import-node) - An `importNode` polyfill for IE11 by [ungap project](https://ungap.github.io).
609 | 
610 | ### History
611 | 
612 | The articles below represent a long story of the Web Components specifications on the way towards the standardization.
613 | Some of them refer to earlier, so-called "v0" Shadow DOM and Custom Elements specs, and abandoned HTML Imports spec.
614 | These materials are here for historical reasons only, they are grouped by years and listed in chronological order.
615 | 
616 | #### 2019
617 | 
618 | - [A history of the HTML slot element](https://component.kitchen/blog/posts/a-history-of-the-html-slot-element)
619 | - [Web Components for Cross-Framework Component Libraries](https://codeburst.io/web-components-for-cross-framework-component-libraries-2647741f9470)
620 | - [Web Components in 2019: Part 1](https://codeburst.io/web-components-in-2019-part-1-6bd7251edce5)
621 | - [Web Components in 2019: Part 2](https://codeburst.io/web-components-in-2019-part-2-a7de8c770c5a)
622 | - [Web Components in 2019: Part 3](https://codeburst.io/web-components-in-2019-part-3-e725b781a414)
623 | - [Web Components in 2019: Part 4](https://codeburst.io/web-components-in-2019-part-4-7fe8e63a4dee)
624 | - [Developments in Web Components I’m excited about in 2019](https://medium.com/angular-in-depth/developments-in-web-components-im-excited-about-in-2019-3ae7751c2f64)
625 | 
626 | #### 2018
627 | 
628 | - [Styling Accessibility: A Web Components Approach](https://medium.com/@cfscorreia/styling-accessibility-a-web-components-approach-dc2aa8123eb2)
629 | - [Web Components 101: An Introduction to Web Components](https://www.telerik.com/blogs/web-components-101-an-introduction-to-web-components)
630 | - [Get started with Vue web components](https://medium.com/@royprins/get-started-with-vue-web-components-593b3d5b3200)
631 | - [6 Reasons You Should Use Native Web Components](https://codeburst.io/6-reasons-you-should-use-native-web-components-b45e18e069c2)
632 | - [Web Components in 2018](https://www.sitepen.com/blog/web-components-in-2018)
633 | - [Web Components Introduction: Creating Custom HTML Elements in 2018](https://www.grapecity.com/en/blogs/web-components-introduction-creating-custom-html-elements-2018)
634 | - [Create & Publish Web Components With Vue CLI 3](https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/)
635 | - [Extending Native DOM Elements with Web Components](https://medium.com/revillweb/extending-native-dom-elements-with-web-components-233350c8e86a)
636 | 
637 | #### 2017
638 | 
639 | - [Styling is critical to web component reuse, but may prove difficult in practice](https://component.kitchen/blog/posts/styling-is-critical-to-web-component-reuse-but-may-prove-difficult-in-practice)
640 | - [Web Components: The Long Game](https://infrequently.org/2017/10/web-components-the-long-game/)
641 | - [Web Components: Just in the Nick of Time (Polymer Summit 2017)](https://youtu.be/y-8Lmg5Gobw)
642 | - [Using Web Components in Ionic (Polymer Summit 2017)](https://youtu.be/UfD-k7aHkQE)
643 | - [Web Components for VR (Polymer Summit 2017)](https://youtu.be/8GmTu2JF4-0)
644 | - [Building UI at Enterprise Scale with Web Components (Polymer Summit 2017)](https://youtu.be/FJ2KEvzlyo4)
645 | - [Custom Elements Everywhere (Polymer Summit 2017)](https://youtu.be/sK1ODp0nDbM)
646 | - [Evolving the Next Generation of Polymer Elements (Polymer Summit 2017)](https://youtu.be/rvpJ5O0W_6A)
647 | - [Polymer @ YouTube (Polymer Summit 2017)](https://youtu.be/tNulrEbTQf8)
648 | - [Web Components for CMS (Polymer Summit 2017)](https://youtu.be/c-WDHG6rrdU)
649 | - [An intro to web components with otters](https://meowni.ca/posts/web-components-with-otters/)
650 | - [The broken promise of Web Components](https://dmitriid.com/blog/2017/03/the-broken-promise-of-web-components/)
651 | - [Regarding the broken promise of Web Components](http://robdodson.me/regarding-the-broken-promise-of-web-components/)
652 | - [Web Components v1 - the next generation](https://web.dev/webcomponents-org/)
653 | 
654 | #### 2016
655 | 
656 | - [Introducing Custom Elements](https://webkit.org/blog/7027/introducing-custom-elements/)
657 | - [The Case for Custom Elements: Part 1](https://medium.com/dev-channel/the-case-for-custom-elements-part-1-65d807b4b439)
658 | - [The Case for Custom Elements: Part 2](https://medium.com/dev-channel/the-case-for-custom-elements-part-2-2efe42ce9133)
659 | - [Demythstifying Web Components](http://www.backalleycoder.com/2016/08/26/demythstifying-web-components/)
660 | - [Extensible web components](https://adactio.com/journal/11052)
661 | - [Web Component Challenges](https://blog.revillweb.com/web-component-challenges-a09ebc598d65)
662 | - [Web Components and progressive enhancement](https://onishi.ltd/articles/2016/08/web-components-and-progressive-enhancement/)
663 | - [Update on standardizing Shadow DOM and Custom Elements](https://annevankesteren.nl/2015/07/shadow-dom-custom-elements-update)
664 | - [What's New in Shadow DOM v1 (by examples)](https://hayatoito.github.io/2016/shadowdomv1/)
665 | - [Why web components are so important](https://blog.revillweb.com/why-web-components-are-so-important-66ad0bd4807a)
666 | - [Understanding Web Components](https://medium.com/the-ui-files/understanding-web-components-d051baa66019)
667 | 
668 | #### 2015
669 | 
670 | - [Introducing Slot-Based Shadow DOM API](https://webkit.org/blog/4096/introducing-shadow-dom-api/)
671 | - [There is an Element for that](https://medium.com/synsugar/there-is-an-element-for-that-a9fcdafe4a25)
672 | - [What happened to Web Components?](https://2ality.com/2015/08/web-component-status.html)
673 | - [Web Components and their role in the future of web development](http://kaytcat.github.io/web-components/)
674 | - [Microsoft Edge and Web Components](https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/)
675 | - [Bringing componentization to the web: An overview of Web Components](https://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/)
676 | - [Why Web Components will make the web a better place for our users](https://medium.com/@kaelig/why-web-components-will-make-the-web-a-better-place-for-our-users-38dc3154fc1d)
677 | - [Practical Questions around Web Components](https://www.ianfeather.co.uk/practical-questions-around-web-components/)
678 | - [The state of Web Components](https://hacks.mozilla.org/2015/06/the-state-of-web-components/)
679 | 
680 | #### 2014
681 | 
682 | - [A No-Nonsense Guide to Web Components, Part 1: The Specs](http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-1-the-specs/)
683 | - [A No-Nonsense Guide to Web Components, Part 2: Practical Use](http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-2-practical-use/)
684 | - [Web Components + Backbone: A Game-Changing Combination](https://youtu.be/dztuKgjk0Bg)
685 | - [Mozilla and Web Components: Update](https://hacks.mozilla.org/2014/12/mozilla-and-web-components/)
686 | - [Server-less applications powered by Web Components](https://youtu.be/MdcD1rNkNLE)
687 | - [Web Components and the Future of CSS](https://youtu.be/QHxrr6Q82yI)
688 | - [Easy composition and reuse with Web Components](https://youtu.be/6vcQlD-jadk)
689 | - [Let’s build some apps with Polymer!](https://youtu.be/kV0hgdMpH28)
690 | - [Polymer: State of the Union](https://youtu.be/0LT6W5QVCJI)
691 | - [Web Components 101: An Introduction to Fundamental Changes in HTML](https://youtu.be/hEzmy93zr0Y?t=540)
692 | - [Web Components 201: Designing Web Components for Reuse](https://youtu.be/dwxaG-eoxdU)
693 | - [Why Web Components — Does the Web Really Need Another Component?](https://medium.com/@shaunwalla/why-web-components-does-the-web-really-need-another-component-4af010b6446)
694 | - [“Don’t stop thinking about tomorrow” - AngularJS and Web Components](https://youtu.be/gSTNTXtQwaY)
695 | - [Multi-device Apps with Web Components](https://youtu.be/kn0y7uugO0Y)
696 | - [As I Walk Through The Valley Of The Shadow Of DOM](https://youtu.be/nbsWP2cPhhU)
697 | - [Why Web Components Are Ready For Production](https://www.telerik.com/blogs/web-components-ready-production)
698 | - [The State of the Componentised Web](https://www.leggetter.co.uk/2014/08/06/state-componentised-web.html)
699 | - [An Addendum to Why Web Components Aren't Ready for Production Yet](https://www.tjvantoll.com/2014/07/18/an-addendum-to-why-web-components-arent-ready-for-production-yet/)
700 | - [Why Web Components Aren't Ready for Production... Yet](https://www.telerik.com/blogs/web-components-arent-ready-production-yet)
701 | - [Component Interop With React And Custom Elements](https://addyosmani.com/blog/component-interop-with-react-and-custom-elements/)
702 | - [Accessibility of Web Components](https://youtu.be/BgvDZZ8Ms8c)
703 | - [Componentize The Web: Back To The Browser!](https://youtu.be/GOPXVLxp9Nc)
704 | - [Google I/O 2014 - Polymer and the Web Components revolution](https://youtu.be/yRbOSdAe_JU)
705 | - [Google I/O 2014 - Polymer and Web Components change everything you know about Web development](https://youtu.be/8OJ7ih8EE7s)
706 | - [Google I/O 2014 - Unlock the next era of UI development with Polymer](https://youtu.be/HKrYfrAzqFA)
707 | - [Making Polymer Elements Accessible](https://youtu.be/_IBiXfxhF-A)
708 | - [Building an Accessible Disclosure Button – using Web Components](https://developer.paciellogroup.com/blog/2014/06/accessible-disclosure-button-using-web-components/)
709 | - [The Road to Web Components](https://youtu.be/yLyyXHhSl8w)
710 | - [The Web Components Revolution is Here](https://youtu.be/3QLmAm9xtnU)
711 | - [Web Components: A chance to create the future](https://youtu.be/JUzjr1bIRUg)
712 | - [Web Component Mashups at 3 a.m.](https://youtu.be/75EuHl6CSTo)
713 | - [Web Components Tools & Libraries](https://youtu.be/iPmN4CvLGJc)
714 | - [Web Components Can Do That?!](https://addyosmani.com/fitc-wccdt/)
715 | - [Web Components and you – dangers to avoid](https://christianheilmann.com/2014/04/18/web-components-and-you-dangers-to-avoid/)
716 | - [HTML as Custom Elements](https://github.com/domenic/html-as-custom-elements)
717 | - [The Web's Declarative, Composable Future](https://addyosmani.com/blog/the-webs-declarative-composable-future/)
718 | - [Using Polymer to Create Web Components](https://code.tutsplus.com/tutorials/using-polymer-to-create-web-components--cms-20475)
719 | - [The Shadow DOM Diaries](https://gist.github.com/dglazkov/efd2deec54f65aa86f2e)
720 | - [A Detailed Introduction To Custom Elements](https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/)
721 | 
722 | #### 2013
723 | 
724 | - [A future called Web Components](https://speakerdeck.com/zenorocha/a-future-called-web-components)
725 | - [Building Mobile Web Applications With Brick](https://youtu.be/dW2ib0bkxGQ)
726 | - [Polymer: declarative, encapsulated, and reusable components for the web](https://youtu.be/DH1vTVkqCDQ)
727 | - [Web Components: Why you're already an expert](https://youtu.be/s1PTPZwzQA4)
728 | - [Yo Polymer: a new way of building web apps](https://youtu.be/booRxAJblwM)
729 | - [Performance and Custom Elements](https://www.stevesouders.com/blog/2013/11/26/performance-and-custom-elements/)
730 | - [Web Components Revolution](https://robdodson.github.io/webcomponents-revolution/)
731 | - [A Guide to Web Components](https://css-tricks.com/modular-future-web-components/)
732 | - [Return of Inspector Web: Web Components a Year Later](https://vimeo.com/78899868)
733 | - [Working with Custom Elements](https://web.dev/customelements/)
734 | - [Creating Reusable Markup with The HTML Template Element](https://blog.teamtreehouse.com/creating-reusable-markup-with-the-html-template-element)
735 | - [Working with Shadow DOM](https://blog.teamtreehouse.com/working-with-shadow-dom)
736 | - [Breaking Development: Web Components](https://www.lukew.com/ff/entry.asp?1752)
737 | - [Web Components: A Tectonic Shift for Web Development - Google I/O 2013](https://youtu.be/fqULJBBEVQE)
738 | - [Web Components: Getting Started](https://vimeo.com/68212204)
739 | - [Shadow DOM 101](https://web.dev/shadowdom/)
740 | - [Shadow DOM 201](https://web.dev/shadowdom-201/)
741 | - [Shadow DOM 301](https://web.dev/shadowdom-301/)
742 | - [Visualizing shadow DOM concepts](https://developer.chrome.com/blog/visualizing-shadow-dom-concepts/)
743 | - [Web components and the future of web development](https://youtu.be/pb6DsPNdoXk)
744 | - [HTML's New Template Tag](https://web.dev/webcomponents-template/)
745 | 
746 | #### 2012
747 | 
748 | - [The Basics of the Shadow DOM](https://www.sitepoint.com/the-basics-of-the-shadow-dom/)
749 | - [Notes on Web Components + ARIA](https://developer.paciellogroup.com/blog/2012/07/notes-on-web-components-aria/)
750 | - [Google I/O 2012 - The Web Platform's Cutting Edge](https://youtu.be/2txPYQOWBtg)
751 | - [Introduction to Web Components](https://www.w3.org/TR/2012/WD-components-intro-20120522/)
752 | 
753 | #### 2011
754 | 
755 | - [Web Components and Model Driven Views by Alex Russell](https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell)
756 | - [What the Heck is Shadow DOM?](https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/)
757 | 
758 | ## Who To Follow
759 | 
760 | <table>
761 |   <tbody>
762 |     <tr>
763 |       <td align="center">
764 |         <a href="https://twitter.com/polymer">
765 |           <img width="80" height="80" src="https://pbs.twimg.com/profile_images/1063502058337136640/RmlG_bbW_80x80.jpg">
766 |           <div>Polymer</div>
767 |         </a>
768 |       </td>
769 |       <td align="center">
770 |         <a href="https://twitter.com/stenciljs">
771 |           <img width="80" height="80" src="https://pbs.twimg.com/profile_images/1135534552137510914/5ZzvOFFp_80x80.png">
772 |           <div>Stencil</div>
773 |         </a>
774 |       </td>
775 |       <td align="center">
776 |         <a href="https://twitter.com/openwc">
777 |           <img width="80" height="80" src="https://pbs.twimg.com/profile_images/1101188623930662912/YKlBD7n6_80x80.png">
778 |           <div>open-wc.org</div>
779 |         </a>
780 |       </td>
781 |       <td align="center">
782 |         <a href="https://twitter.com/webcomp_dev">
783 |           <img width="80" height="80" src="https://pbs.twimg.com/profile_images/1169270943371407360/U-90Bxn0_80x80.jpg">
784 |           <div>webcomponents.dev</div>
785 |         </a>
786 |       </td>
787 |     </tr>
788 |     <tr>
789 |       <td align="center">
790 |         <a href="https://twitter.com/justinfagnani">
791 |           <img width="80" height="80" src="https://pbs.twimg.com/profile_images/378800000808710206/2dbdaa1cb7b0db02f997aea5b40f29b8_80x80.jpeg">
792 |           <div>Justin Fagnani</div>
793 |         </a>
794 |       </td>
795 |       <td align="center">
796 |         <a href="https://twitter.com/viljamis">
797 |           <img width="80" height="80" src="https://pbs.twimg.com/profile_images/671595827740086273/wCUWq-1S_80x80.png">
798 |           <div>Viljami Salminen</div>
799 |         </a>
800 |       </td>
801 |       <td align="center">
802 |         <a href="https://twitter.com/JanMiksovsky">
803 |           <img width="80" height="80" src="https://pbs.twimg.com/profile_images/675000078055051264/u1ZEQfeE_80x80.jpg">
804 |           <div>Jan Miksovsky</div>
805 |         </a>
806 |       </td>
807 |       <td align="center">
808 |         <a href="https://twitter.com/serhiikulykov">
809 |           <img width="80" height="80" src="https://pbs.twimg.com/profile_images/1028197887329685504/cM6nOHlp_80x80.jpg">
810 |           <div>Serhii Kulykov</div>
811 |         </a>
812 |       </td>
813 |     </tr>
814 |   <tbody>
815 | </table>
816 | 
817 | ## Maintainers
818 | 
819 | - Created by [@mateusortiz](https://github.com/mateusortiz) in 2014.
820 | - Maintained by [@web-padawan](https://github.com/web-padawan) since 2018.
821 | 


--------------------------------------------------------------------------------