rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
c9485bf5767af02655955fc6b8fe7868364cdac6
awesome-awesomeness/html/webcomponents.html
rhetenor 5916c5c074 update lists
2025-07-18 22:22:32 +02:00

1801 lines
80 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<h1 id="awesome-web-components-awesome">Awesome Web Components <a
href="https://awesome.re"><img src="https://awesome.re/badge.svg"
alt="Awesome" /></a></h1>
<p>A curated list of awesome Web Components resources.</p>
<blockquote>
<p><strong>Note</strong> This project was previously named “Web
Components the Right Way”</p>
</blockquote>
<p><a
href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web
Components</a> — 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.</p>
<h2 id="contents">Contents</h2>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#standards">Standards</a>
<ul>
<li><a href="#custom-elements">Custom Elements</a></li>
<li><a href="#shadow-dom">Shadow DOM</a></li>
<li><a href="#html-templates">HTML Templates</a></li>
<li><a href="#css-shadow-parts">CSS Shadow Parts</a></li>
</ul></li>
<li><a href="#guides">Guides</a>
<ul>
<li><a href="#accessibility">Accessibility</a></li>
<li><a href="#best-practices">Best Practices</a></li>
<li><a href="#codelabs">Codelabs</a></li>
<li><a href="#examples">Examples</a></li>
</ul></li>
<li><a href="#articles">Articles</a>
<ul>
<li><a href="#architecture">Architecture</a></li>
<li><a href="#interoperability">Interoperability</a></li>
<li><a href="#limitations">Limitations</a></li>
<li><a href="#styling">Styling</a></li>
</ul></li>
<li><a href="#real-world">Real World</a>
<ul>
<li><a href="#case-studies">Case Studies</a></li>
<li><a href="#components">Components</a></li>
<li><a href="#component-libraries">Component Libraries</a></li>
<li><a href="#design-systems">Design Systems</a></li>
<li><a href="#use-cases">Use Cases</a></li>
</ul></li>
<li><a href="#libraries">Libraries</a>
<ul>
<li><a href="#class-based">Class Based</a></li>
<li><a href="#functional">Functional</a></li>
<li><a href="#integrations">Integrations</a></li>
<li><a href="#benchmarks">Benchmarks</a></li>
</ul></li>
<li><a href="#frameworks">Frameworks</a>
<ul>
<li><a href="#angular">Angular</a></li>
<li><a href="#react">React</a></li>
<li><a href="#vue">Vue</a></li>
<li><a href="#svelte">Svelte</a></li>
</ul></li>
<li><a href="#ecosystem">Ecosystem</a>
<ul>
<li><a href="#meta-frameworks">Meta Frameworks</a></li>
<li><a href="#starter-kits">Starter Kits</a></li>
<li><a href="#testing-solutions">Testing Solutions</a></li>
<li><a href="#tools">Tools</a></li>
</ul></li>
<li><a href="#books">Books</a></li>
<li><a href="#tutorials">Tutorials</a></li>
<li><a href="#insights">Insights</a>
<ul>
<li><a href="#podcasts">Podcasts</a></li>
<li><a href="#presentations">Presentations</a></li>
<li><a href="#talks">Talks</a></li>
</ul></li>
<li><a href="#usage-metrics">Usage Metrics</a></li>
<li><a href="#proposals">Proposals</a>
<ul>
<li><a href="#form-associated-custom-elements">Form-associated Custom
Elements</a></li>
<li><a href="#constructable-stylesheet-objects">Constructable Stylesheet
Objects</a></li>
<li><a href="#custom-state-pseudo-class">Custom State Pseudo
Class</a></li>
</ul></li>
<li><a href="#miscellaneous">Miscellaneous</a></li>
<li><a href="#archive">Archive</a>
<ul>
<li><a href="#polyfills">Polyfills</a></li>
<li><a href="#history">History</a></li>
</ul></li>
<li><a href="#who-to-follow">Who To Follow</a></li>
<li><a href="#maintainers">Maintainers</a></li>
</ul>
<h2 id="introduction">Introduction</h2>
<ul>
<li><a
href="https://css-tricks.com/an-introduction-to-web-components/">An
Introduction to Web Components</a></li>
<li><a
href="https://developer.salesforce.com/blogs/2020/01/intro-to-web-components.html">Intro
to Web Components</a></li>
<li><a
href="https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/">The
Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And
NPM</a></li>
<li><a
href="https://www.thinktecture.com/web-components/introduction-and-motivation/">The
Motivation For Using Web Components, an Introduction</a></li>
<li><a
href="https://hacks.mozilla.org/2018/11/the-power-of-web-components/">The
Power of Web Components</a></li>
<li><a
href="https://nhswd.com/blog/web-components-101-what-are-web-components/">Web
Components 101</a></li>
<li><a href="https://javascript.info/webcomponents-intro">Web
Components: From the orbital height</a></li>
<li><a
href="https://gomakethings.com/what-are-browser-native-web-components/">What
are browser-native web components?</a></li>
<li><a
href="https://www.fast.design/docs/resources/why-web-components/">Why
Web Components?</a></li>
</ul>
<h2 id="standards">Standards</h2>
<h3 id="custom-elements">Custom Elements</h3>
<p>Custom Elements provide a way for authors to build their own
fully-featured DOM elements.</p>
<ul>
<li><a
href="https://css-tricks.com/a-guide-to-custom-elements-for-react-developers/">A
Guide to Custom Elements for React Developers</a></li>
<li><a href="https://github.com/shawnbot/custom-elements">All about HTML
Custom Elements</a></li>
<li><a href="https://javascript.info/custom-elements">Custom
elements</a></li>
<li><a href="https://web.dev/custom-elements-v1/">Custom Elements v1:
Reusable Web Components</a></li>
<li><a
href="https://nolanlawson.com/2021/08/03/handling-properties-in-custom-element-upgrades/">Handling
properties in custom element upgrades</a></li>
<li><a
href="https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4">Handy
Custom Elements’ Patterns</a></li>
<li><a
href="https://html.spec.whatwg.org/multipage/custom-elements.html">HTML
Living Standard: Custom elements</a></li>
<li><a
href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">MDN
- Using Custom Elements</a></li>
<li><a
href="https://github.com/web-platform-tests/wpt/tree/master/custom-elements">web-platform-tests</a></li>
</ul>
<h3 id="shadow-dom">Shadow DOM</h3>
<p>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.</p>
<ul>
<li><a
href="https://pm.dartus.fr/blog/a-complete-guide-on-shadow-dom-and-event-propagation/">A
complete guide on shadow DOM and event propagation</a></li>
<li><a href="https://dom.spec.whatwg.org/#shadow-trees">DOM Living
Standard: Shadow tree</a></li>
<li><a
href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">MDN
- Using Shadow DOM</a></li>
<li><a
href="https://dev.to/open-wc/mind-the-document-activeelement-2o9a">Mind
the document.activeElement!</a></li>
<li><a
href="https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af">Open
vs. Closed Shadow DOM</a></li>
<li><a href="https://javascript.info/shadow-dom">Shadow DOM</a></li>
<li><a href="https://javascript.info/shadow-dom-events">Shadow DOM and
events</a></li>
<li><a
href="https://github.com/praveenpuglia/shadow-dom-in-depth">Shadow DOM
in depth</a></li>
<li><a href="https://javascript.info/slots-composition">Shadow DOM
slots, composition</a></li>
<li><a href="https://javascript.info/shadow-dom-style">Shadow DOM
styling</a></li>
<li><a href="https://web.dev/shadowdom-v1/">Shadow DOM v1:
Self-Contained Web Components</a></li>
<li><a
href="https://medium.com/front-end-hacking/the-rise-of-shadow-dom-84aa1f731e82">The
Rise of Shadow DOM</a></li>
<li><a
href="https://coryrylan.com/blog/understanding-slot-updates-with-web-components">Understanding
Slot Updates with Web Components</a></li>
<li><a href="https://bitsofco.de/what-is-the-shadow-dom/">What is the
Shadow DOM?</a></li>
<li><a href="https://dev.to/westbrook/who-doesnt-love-some-s-3de0">Who
doesn’t love some slots?</a></li>
<li><a
href="https://dev.to/westbrook/your-content-in-shadow-dom-portals-3cdb">Your
Content in Shadow DOM Portals</a></li>
<li><a
href="https://github.com/web-platform-tests/wpt/tree/master/shadow-dom">web-platform-tests</a></li>
</ul>
<h3 id="html-templates">HTML Templates</h3>
<p><code>&lt;template&gt;</code> element is used to declare fragments of
HTML that can be cloned and inserted in the document by script.</p>
<ul>
<li><a
href="https://css-tricks.com/crafting-reusable-html-templates/">Crafting
Reusable HTML Templates</a></li>
<li><a
href="https://html.spec.whatwg.org/multipage/scripting.html#the-template-element">HTML
Living Standard: The <code>template</code> element</a></li>
<li><a
href="https://gomakethings.com/html-templates-with-vanilla-javascript/">HTML
templates with vanilla JavaScript</a></li>
<li><a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template">MDN
- &lt;template&gt;: The Content Template element</a></li>
<li><a
href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots">MDN
- Using templates and slots</a></li>
<li><a href="https://javascript.info/template-element">Template
element</a></li>
<li><a
href="https://kittygiraudel.com/2022/09/30/templating-in-html/">Templating
in HTML</a></li>
<li><a
href="https://dev.to/ahferroin7/the-html5-template-element-26b6">The
HTML5 template element</a></li>
<li><a
href="https://blog.openreplay.com/understanding-the-template-element-in-html/">Understanding
The Template Element In HTML</a></li>
<li><a
href="https://github.com/web-platform-tests/wpt/tree/master/html/semantics/scripting-1/the-template-element">web-platform-tests</a></li>
</ul>
<h3 id="css-shadow-parts">CSS Shadow Parts</h3>
<p>CSS Shadow Parts allow developers to expose certain elements inside
Shadow DOM for styling purposes.</p>
<ul>
<li><a href="https://www.w3.org/TR/css-shadow-parts-1/">W3C First Public
Working Draft</a></li>
<li><a
href="https://dev.to/webpadawan/css-shadow-parts-are-coming-mi5">CSS
Shadow Parts are coming!</a></li>
<li><a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">MDN -
<code>::part()</code> CSS pseudo element</a></li>
<li><a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part">MDN
- <code>part</code> global attribute</a></li>
<li><a href="https://meowni.ca/posts/part-theme-explainer/">::part and
::theme, an ::explainer</a></li>
<li><a
href="https://github.com/web-platform-tests/wpt/tree/master/css/css-shadow-parts">web-platform-tests</a></li>
</ul>
<h2 id="guides">Guides</h2>
<h3 id="accessibility">Accessibility</h3>
<ul>
<li><a
href="https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html">Accessibility
for Web Components</a></li>
<li><a
href="https://coryrylan.com/blog/accessibility-with-id-referencing-and-shadow-dom">Accessibility
with ID Referencing and Shadow DOM</a></li>
<li><a
href="https://nolanlawson.com/2022/06/14/dialogs-and-shadow-dom-can-we-make-it-accessible/">Dialogs
and shadow DOM: can we make it accessible?</a></li>
<li><a href="https://www.sitepoint.com/accessible-web-components/">How
to Make Accessible Web Components — a Brief Guide</a></li>
<li><a
href="https://nolanlawson.com/2021/02/13/managing-focus-in-the-shadow-dom/">Managing
focus in the shadow DOM</a></li>
<li><a
href="https://robdodson.me/the-future-of-accessibility-for-custom-elements/">The
future of accessibility for custom elements</a></li>
<li><a
href="https://www.erikkroes.nl/blog/accessibility/the-guide-to-accessible-web-components-draft/">The
Guide to Accessible Web Components</a></li>
<li><a
href="https://www.24a11y.com/2019/web-components-and-the-aom/">Web
Components and the Accessibility Object model (AOM)</a></li>
<li><a href="https://www.tpgi.com/web-components-punch-list/">Web
Components punch list</a></li>
<li><a
href="https://www.24a11y.com/2018/web-components-still-need-to-be-accessible/">Web
components still need to be accessible</a></li>
</ul>
<h3 id="best-practices">Best Practices</h3>
<ul>
<li><a href="https://web.dev/custom-elements-best-practices/">Custom
Element Best Practices</a></li>
<li><a
href="https://open-wc.org/guides/developing-components/publishing/">Developing
Components: Publishing</a></li>
<li><a href="https://github.com/webcomponents/gold-standard/wiki">Gold
Standard Checklist for Web Components</a></li>
<li><a
href="https://w3ctag.github.io/webcomponents-design-guidelines/">Guidelines
for creating web platform compatible components</a></li>
<li><a
href="https://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/">How
to Publish Web Components to NPM</a></li>
<li><a href="https://open-wc.org">Open Web Components
Recommendations</a></li>
</ul>
<h3 id="codelabs">Codelabs</h3>
<ul>
<li><a
href="https://dev.to/straversi/build-a-story-web-component-with-litelement-e59">Build
a Story Web Component with LitElement</a></li>
<li><a
href="https://medium.com/stories-from-upstatement/building-custom-elements-with-web-components-for-the-2020-elections-f767ff9e9c6a">Building
Custom Elements with Web Components for the 2020 Elections</a></li>
<li><a
href="https://css-tricks.com/creating-custom-form-controls-with-elementinternals/">Creating
Custom Form Controls with ElementInternals</a></li>
<li><a
href="https://codelabs.developers.google.com/codelabs/the-lit-path">From
Web Component to Lit Element</a></li>
<li><a href="https://web.dev/components-howto-checkbox/">HowTo
Components –<code>&lt;howto-checkbox&gt;</code></a></li>
<li><a href="https://web.dev/components-howto-tabs/">HowTo Components
–<code>&lt;howto-tabs&gt;</code></a></li>
<li><a href="https://web.dev/components-howto-tooltip/">HowTo Components
– <code>&lt;howto-tooltip&gt;</code></a></li>
<li><a href="https://open-wc.org/codelabs/basics/lit-html.html#0">Lit:
basics</a></li>
<li><a
href="https://open-wc.org/codelabs/intermediate/lit-html.html#0">Lit:
intermediate</a></li>
<li><a
href="https://codelabs.developers.google.com/codelabs/lit-2-for-react-devs#0">Lit
for React Developers</a></li>
<li><a
href="https://open-wc.org/codelabs/basics/web-components.html#0">Web
Components: basics</a></li>
</ul>
<h3 id="examples">Examples</h3>
<ul>
<li><a
href="https://github.com/thepassle/generic-components">generic-components</a>
- Collection of generic web components with a focus on accessibility,
and ease of use.</li>
<li><a
href="https://github.com/GoogleChromeLabs/howto-components">howto-components</a>
- Collection of web components that implement common web UI
patterns.</li>
<li><a href="https://github.com/LeaVerou/nudeui">Nude UI</a> -
Collection of accessible, customizable, ultra-light web components.</li>
<li><a
href="https://open-wc.org/guides/developing-components/code-examples/">open-wc
code examples</a> - Collection of best practices and design patterns for
developing web components.</li>
<li><a
href="https://github.com/martine-dowden/vanilla-retro-js">vanilla-retro-js</a>
- Vanilla JS UI component library of HTML deprecated tags.</li>
<li><a
href="https://github.com/mdn/web-components-examples">web-components-examples</a>
- Series of web components examples, related to the MDN web components
documentation.</li>
</ul>
<h2 id="articles">Articles</h2>
<h3 id="architecture">Architecture</h3>
<ul>
<li><a
href="https://itnext.io/a-deep-analysis-into-isomorphic-autonomous-cross-framework-usage-microfrontends-364271dc5fa9">A
deep analysis into isomorphic, autonomous cross-framework usage
#MicroFrontends</a></li>
<li><a
href="https://www.smashingmagazine.com/2019/09/frankenstein-migration-framework-agnostic-approach-part-1/">Frankenstein
Migration: Framework-Agnostic Approach (Part 1)</a></li>
<li><a
href="https://www.smashingmagazine.com/2019/09/frankenstein-migration-framework-agnostic-approach-part-2/">Frankenstein
Migration: Framework-Agnostic Approach (Part 2)</a></li>
<li><a
href="https://codeburst.io/generating-config-driven-dynamic-forms-using-web-components-7c8d400f7f2e">Generating
Config driven Dynamic Forms using Web Components</a></li>
<li><a
href="https://component.kitchen/blog/posts/hiding-internal-framework-methods-and-properties-from-web-component-apis">Hiding
internal framework methods and properties from web component
APIs</a></li>
<li><a
href="https://medium.com/@WebReflection/how-to-deliver-custom-elements-702fae32d25c">How
to deliver Custom Elements</a></li>
<li><a
href="https://css-tricks.com/making-web-components-for-different-contexts/">Making
Web Components for Different Contexts</a></li>
<li><a
href="https://component.kitchen/blog/posts/supporting-both-automatic-and-manual-registration-of-custom-elements">Supporting
both automatic and manual registration of custom elements</a></li>
<li><a
href="https://equinusocio.dev/blog/web-components-the-right-way/">Web
Components — the right way</a></li>
</ul>
<h3 id="interoperability">Interoperability</h3>
<ul>
<li><a
href="https://css-tricks.com/advanced-tooling-for-web-components/">Advanced
Tooling for Web Components</a></li>
<li><a href="https://custom-elements-everywhere.com">Custom Elements
Everywhere</a></li>
<li><a href="https://robdodson.me/interoperable-custom-elements/">Custom
Elements That Work Anywhere</a></li>
<li><a
href="https://www.voorhoede.nl/nl/blog/javascript-frameworks-meet-web-components/">JavaScript
frameworks, meet Web Components</a></li>
<li><a
href="https://lamplightdev.com/blog/2020/01/18/web-components-arent-a-framework-replacement-theyre-better-than-that/">Web
Components aren’t a framework replacement - they’re better than
that</a></li>
<li><a
href="https://medium.com/@sergicontre/web-components-seamlessly-interoperable-82efd6989ca4">Web
Components: Seamlessly interoperable</a></li>
</ul>
<h3 id="limitations">Limitations</h3>
<ul>
<li><a
href="https://dev.to/webpadawan/beyond-the-polyfills-how-web-components-affect-us-today-3j0a">Beyond
the polyfills: how Web Components affect us today?</a></li>
<li><a href="https://www.hjorthhansen.dev/shadow-dom-and-forms/">Custom
elements, shadow DOM and implicit form submission</a></li>
<li><a
href="https://www.hjorthhansen.dev/shadow-dom-form-participation/">Form-associated
custom elements</a></li>
<li><a
href="https://www.hjorthhansen.dev/you-might-not-need-shadow-dom/">You
might not need shadow DOM</a></li>
</ul>
<h3 id="styling">Styling</h3>
<ul>
<li><a
href="https://nolanlawson.com/2021/08/15/does-shadow-dom-improve-style-performance/">Does
shadow DOM improve style performance?</a></li>
<li><a
href="https://every-layout.dev/blog/eschewing-shadow-dom/">Eschewing
Shadow DOM</a></li>
<li><a href="https://web.dev/custom-properties-web-components/">How
Nordhealth uses Custom Properties in Web Components</a></li>
<li><a
href="https://nolanlawson.com/2021/01/03/options-for-styling-web-components/">Options
for styling web components</a></li>
<li><a
href="https://nolanlawson.com/2022/06/22/style-scoping-versus-shadow-dom-which-is-fastest/">Style
scoping versus shadow DOM: which is fastest?</a></li>
<li><a href="https://css-tricks.com/styling-a-web-component/">Styling a
Web Component</a></li>
<li><a
href="https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/">Styling
in the Shadow DOM With CSS Shadow Parts</a></li>
<li><a
href="https://css-tricks.com/thinking-through-styling-options-for-web-components/">Thinking
Through Styling Options for Web Components</a></li>
<li><a
href="https://css-tricks.com/web-component-pseudo-classes-and-pseudo-elements/">Web
Component Pseudo-Classes and Pseudo-Elements are Easier Than You
Think</a></li>
<li><a
href="https://css-tricks.com/web-standards-meet-user-land-using-css-in-js-to-style-custom-elements/">Web
Standards Meet User-Land: Using CSS-in-JS to Style Custom
Elements</a></li>
</ul>
<h2 id="real-world">Real World</h2>
<h3 id="case-studies">Case Studies</h3>
<ul>
<li><a
href="https://dev.to/ionic/apple-just-shipped-web-components-to-production-and-you-probably-missed-it-57pf">Apple
Just Shipped Web Components to Production and You Probably Missed
It</a></li>
<li><a
href="https://dev.to/thatjoemoore/bringing-order-to-web-design-chaos--3fhb">Bringing
Order to Web Design Chaos (with Web Components)</a></li>
<li><a
href="https://www.infoworld.com/article/3618410/get-moving-with-microsofts-fast-web-components.html">Get
moving with Microsoft’s FAST web components</a></li>
<li><a
href="https://thenewstack.io/how-web-components-are-used-at-github-and-salesforce/">How
Web Components Are Used at GitHub and Salesforce</a></li>
<li><a
href="https://github.blog/2021-05-04-how-we-use-web-components-at-github/">How
we use Web Components at GitHub</a></li>
<li><a
href="https://medium.com/@Danetag/implementing-a-design-language-system-with-stencil-js-515432918eb5">Implementing
a Design Language System with Stencil.js</a></li>
<li><a href="https://dev.to/thepassle/ing--web-components-aef">ING ❤ Web
Components</a></li>
<li><a
href="https://www.infoq.com/articles/ing-open-sources-lion-web-component/">ING
Open-Sources Lion, Its White-Label Web Component Library – Q&amp;A with
Thomas Allmer</a></li>
<li><a
href="https://medium.com/samsung-internet-dev/lessons-learned-making-our-app-with-web-components-bf55379cfcda">Lessons
Learned, making our app with Web Components</a></li>
<li><a
href="https://bitworking.org/news/2019/07/looking-back-on-five-years-of-web-components">Looking
back on five years of web components</a></li>
<li><a
href="https://dev.to/joe8bit/shipping-web-components-in-2020-2h54">Shipping
Web Components in 2020</a></li>
<li><a href="https://briangrinstead.com/blog/firefox-webcomponents/">The
Firefox UI is now built with Web Components</a></li>
<li><a
href="https://about.gitlab.com/blog/2021/05/03/using-web-components-to-encapsulate-css-and-resolve-design-system-conflicts/">Using
web components to encapsulate CSS and resolve design system
conflicts</a></li>
<li><a
href="https://www.infoq.com/news/2020/08/web-components-sf-meetup-2020/">Web
Components at GitHub - Web Components SF Meetup</a></li>
<li><a
href="https://www.infoq.com/news/2020/03/web-components-salesforce-lwc/">Web
Components at Scale at Salesforce: Challenges Encountered, Lessons
Learnt</a></li>
<li><a
href="https://medium.com/@jarrodek/composable-applications-with-web-components-ebe5158387be">Web
Development At Scale: Composable Applications With Web
Components</a></li>
<li><a
href="https://web.dev/how-we-build-webdev-and-use-web-components/">web.dev
engineering blog #1: How we build the site and use Web
Components</a></li>
</ul>
<h3 id="components">Components</h3>
<ul>
<li><a
href="https://github.com/OvidijusParsiunas/active-table"><code>&lt;active-table&gt;</code></a>
- Editable table web component.</li>
<li><a
href="https://github.com/web-padawan/api-viewer-element"><code>&lt;api-viewer&gt;</code></a>
- API documentation and live playground for Web Components.</li>
<li><a
href="https://github.com/justinfagnani/chessboard-element"><code>&lt;chess-board&gt;</code></a>
- Standalone chess board web component.</li>
<li><a
href="https://github.com/css-doodle/css-doodle"><code>&lt;css-doodle&gt;</code></a>
- Web component for drawing patterns with CSS.</li>
<li><a
href="https://github.com/GoogleChromeLabs/dark-mode-toggle"><code>&lt;dark-mode-toggle&gt;</code></a>
- Custom element that allows to create a dark mode toggle or
switch.</li>
<li><a
href="https://github.com/OvidijusParsiunas/deep-chat"><code>&lt;deep-chat&gt;</code></a>
- Web component for chat with AI capabilities.</li>
<li><a
href="https://github.com/nolanlawson/emoji-picker-element"><code>&lt;emoji-picker&gt;</code></a>
- Lightweight emoji picker, distributed as a web component.</li>
<li><a
href="https://github.com/filamentgroup/fg-modal"><code>&lt;fg-modal&gt;</code></a>
- Accessible modal dialog web component.</li>
<li><a
href="https://github.com/avipunes/file-viewer"><code>&lt;file-viewer&gt;</code></a>
- Web component built with Svelte to view files.</li>
<li><a
href="https://github.com/alenaksu/json-viewer"><code>&lt;json-viewer&gt;</code></a>
- Web component to visualize JSON data in a tree view.</li>
<li><a
href="https://github.com/paulirish/lite-youtube-embed"><code>&lt;lite-youtube&gt;</code></a>
- Lite YouTube embed with a focus on visual performance.</li>
<li><a
href="https://github.com/cifkao/html-midi-player"><code>&lt;midi-player&gt;</code></a>
- MIDI file player and visualizer web components.</li>
<li><a
href="https://github.com/google/model-viewer"><code>&lt;model-viewer&gt;</code></a>
- Web component for rendering interactive 3D models.</li>
<li><a
href="https://github.com/playerxo/playerx"><code>&lt;player-x&gt;</code></a>
- Media player web component.</li>
<li><a
href="https://github.com/andreruffert/progressive-image-element"><code>&lt;progressive-image&gt;</code></a>
- Custom element to progressively enhance image placeholders.</li>
<li><a
href="https://github.com/bitjson/qr-code"><code>&lt;qr-code&gt;</code></a>
– Web component for rendering customizable, animate-able, SVG-based QR
codes.</li>
<li><a
href="https://github.com/andreruffert/range-slider-element"><code>&lt;range-slider&gt;</code></a>
- Accessible range slider custom element with keyboard support.</li>
<li><a
href="https://github.com/mrin9/RapiDoc"><code>&lt;rapi-doc&gt;</code></a>
- Web component for creating documentation from OpenAPI
Specification.</li>
<li><a
href="https://github.com/halvves/shader-doodle"><code>&lt;shader-doodle&gt;</code></a>
- Web component for writing and rendering shaders.</li>
<li><a
href="https://github.com/mahozad/theme-switch"><code>&lt;theme-switch&gt;</code></a>
- Animated toggle button to switch between light, dark, and system
theme.</li>
<li><a
href="https://github.com/basecamp/trix"><code>&lt;trix-editor&gt;</code></a>
- Rich text editor custom element for everyday writing.</li>
<li><a
href="https://github.com/vime-js/vime"><code>&lt;vime-player&gt;</code></a>
- Customizable, extensible, accessible and framework agnostic media
player.</li>
<li><a
href="https://github.com/stefanjudis/web-vitals-element"><code>&lt;web-vitals&gt;</code></a>
- Bring <a href="https://github.com/GoogleChrome/web-vitals">web
vitals</a> quickly into your page using custom elements.</li>
</ul>
<h3 id="component-libraries">Component Libraries</h3>
<ul>
<li><a href="https://github.com/ampproject/amphtml">AMP</a> - Web
component framework for easily creating user-first websites, stories,
ads, emails and more.</li>
<li><a href="https://github.com/adaleks/anywhere-ui">AnywhereUI</a> -
Collection of rich web components that includes framework bindings.
Created with StencilJS.</li>
<li><a href="https://github.com/apollo-elements/apollo-elements">Apollo
Elements</a> - Custom elements for using Apollo GraphQL with various web
components libraries.</li>
<li><a href="https://github.com/axa-ch-webhub-cloud/pattern-library">AXA
Pattern Library</a> - AXA CH UI components library built with Web
Components.</li>
<li><a href="https://github.com/kjantzer/bui">Blackstone UI</a> - Web
components for creating interfaces by Blackstone Publishing.</li>
<li><a href="https://github.com/BlazeSoftware/atoms">Blaze UI Atoms</a>
- Set of web components powered by Blaze CSS.</li>
<li><a href="https://github.com/BrightspaceUI/core">Brightspace UI
core</a> - Collection of web components for building Brightspace
applications.</li>
<li><a href="https://github.com/CleverCloud/clever-components">Clever
components</a> - Collection of Web Components made by Clever Cloud.</li>
<li><a href="https://github.com/curvenote/article">Curvenote</a> - Web
components for creating interactive scientific articles.</li>
<li><a href="https://github.com/dataformsjs/dataformsjs">DataFormsJS</a>
- Standalone Components for SPA routing, displaying data from web
services, and more.</li>
<li><a href="https://github.com/Polydile/dile-components">Dile
Components</a> - General use Web Components for websites and
applications.</li>
<li><a href="https://github.com/google/elements-sk">elements-sk</a> -
Collection of custom elements for “a la carte” web development.</li>
<li><a
href="https://github.com/github/github-elements">github-elements</a> -
GitHub’s Web Component collection.</li>
<li><a href="https://github.com/elix/elix">Elix</a> - High-quality,
customizable web components for common user interface patterns.</li>
<li><a href="https://github.com/eclipse/eclipsefuro-web">Furo
Webcomponents</a> - Enterprise ready set of web components which work
best with Eclipse Furo.</li>
<li><a href="https://github.com/equinor/fusion-web-components">Fusion
Web Components</a> - Ser of web components used by Equinor Fusion.</li>
<li><a href="https://github.com/IgniteUI/igniteui-webcomponents">Ignite
UI Web Components</a> - Complete library of UI components from
Infragistics.</li>
<li><a
href="https://github.com/MozillaReality/immersive-custom-elements">Immersive
Custom Elements</a> - Set of web components for embedding immersive (VR
&amp; AR) content.</li>
<li><a href="https://github.com/joomla-projects/custom-elements">Joomla
UI custom elements</a> - Compilation of Joomla 4 Custom Elements.</li>
<li><a href="https://github.com/smeup/ketchup">Ketch.UP</a> - Web
components library for Sme.UP.</li>
<li><a href="https://github.com/GriffinJohnston/ldrs">LDRS</a> -
Lightweight, customizable loading animations/spinners.</li>
<li><a href="https://github.com/ing-bank/lion">Lion Web Components</a> -
Set of highly performant, accessible and flexible Web Components.</li>
<li><a
href="https://github.com/elmsln/lrnwebcomponents/">LRNWebComponents</a>
- ELMS:LN produced web components for any project.</li>
<li><a href="https://github.com/lume/lume">Lume</a> - Custom elements
for defining 2D or 3D scenes rendered with CSS3D or WebGL.</li>
<li><a href="https://github.com/medblocks/medblocks-ui">Medblocks UI</a>
- Web Components for rapid development of openEHR and FHIR systems.</li>
<li><a
href="https://github.com/microsoftgraph/microsoft-graph-toolkit">Microsoft
Graph Toolkit</a> - Collection of web components for the Microsoft
Graph.</li>
<li><a
href="https://github.com/stryker-mutator/mutation-testing-elements">Mutation
testing elements</a> - A schema for mutation testing results with the
web components to visualize it.</li>
<li><a
href="https://github.com/ebi-webcomponents/nightingale">Nightingale</a>
- Data visualisation web components for the life sciences.</li>
<li><a href="https://github.com/nuxeo/nuxeo-elements">Nuxeo Elements</a>
- Components for building web applications with Nuxeo using Web
Components.</li>
<li><a href="https://github.com/1-Platform/op-components">One Platform
Components</a> - Set of web components for Red Hat One Platform.</li>
<li><a href="https://github.com/openbap/obap-elements">Open Business
Application Platform Web Components</a> - Collection of web components
designed for business applications.</li>
<li><a href="https://github.com/pixano/pixano-elements">Pixano
Elements</a> - Re-usable web components dedicated to data annotation
tasks.</li>
<li><a
href="https://github.com/PolymerLabs/playground-elements">Playground
Elements</a> - Serverless code experiences with web components.</li>
<li><a href="https://github.com/shoelace-style/shoelace">Shoelace</a> -
A forward-thinking library of web components.</li>
<li><a href="https://github.com/HTMLElements/smart-webcomponents">Smart
Web Components</a> - Web components for business applications.</li>
<li><a href="https://github.com/bennypowers/stripe-elements">Stripe
Elements</a> - Custom Element Wrapper for Stripe.js v3 Elements.</li>
<li><a href="https://github.com/eeditiones/tei-publisher-components">TEI
Publisher Components</a> - Collection of web components used by TEI
Publisher and apps generated by it.</li>
<li><a
href="https://github.com/LeavittSoftware/titanium-elements">Titanium
Elements</a> - Collection of lightweight web components used by Leavitt
Group Enterprises.</li>
<li><a href="https://github.com/Tradeshift/elements">Tradeshift
Elements</a> - Reusable Tradeshift UI Components as Web Components.</li>
<li><a href="https://github.com/WebLogin/trendchart-elements">TrendChart
Elements</a> - Components to generate simple, light and responsive
charts.</li>
<li><a href="https://github.com/umbraco/Umbraco.UI">Umbraco UI
Components</a> - Collection of user interface web components for Umbraco
CMS.</li>
<li><a href="https://github.com/vaadin/web-components">Vaadin
components</a> - Evolving set of high-quality web components for
building business web applications.</li>
<li><a href="https://github.com/bendera/vscode-webview-elements">VSCode
Webview Elements</a> - Components for creating VSCode extensions which
use the Webview API.</li>
<li><a href="https://github.com/senx/warpview">Warp View</a> -
Collection of charting web components for Warp 10.</li>
<li><a href="https://github.com/Webmarkets/wm-web-components">Webmarkets
web components</a> - Set of Webmarkets’ public web components.</li>
<li><a href="https://github.com/wiredjs/wired-elements">Wired
Elements</a> - Set of common UI elements with a hand-drawn, sketchy
look.</li>
<li><a href="https://github.com/wokwi/wokwi-elements">Wokwi Elements</a>
- Web Components for Arduino and various electronic parts.</li>
<li><a href="https://github.com/kherrick/x-weather">XWeather</a> -
Collection of web components implementing portions of the OpenWeatherMap
API.</li>
</ul>
<h3 id="design-systems">Design Systems</h3>
<ul>
<li><a href="https://github.com/RocketCommunicationsInc/astro">Astro
Space UX Design System</a> - Set of components to build rich space app
experiences with established interaction patterns.</li>
<li><a href="https://auro.alaskaair.com">Auro Design System</a> - Alaska
Airlines design system to innovate on ideas and collaborate on the
future.</li>
<li><a href="https://blueprintui.dev">Blueprint UI</a> - Web Component
based design system with flexible and lightweight components.</li>
<li><a href="https://github.com/boltdesignsystem/bolt">Bolt Design
System</a> - Twig and Web Component-powered UI components, reusable
visual styles and tooling.</li>
<li><a href="https://github.com/Esri/calcite-components">Calcite
Components</a> - Shared Web Components for Esri’s Calcite design
framework.</li>
<li><a
href="https://github.com/carbon-design-system/carbon-web-components">Carbon
Web Components</a> - Carbon Design System variant on top of Web
Components.</li>
<li><a
href="https://github.com/vmware-clarity/core/tree/main/projects/core">Clarity
Core Web Components</a> - Suite of web components from the Clarity
Design System.</li>
<li><a href="https://github.com/freshdesk/crayons">Crayons</a> -
Collection of web components that adheres to the Freshworks Design
System.</li>
<li><a
href="https://github.com/microsoft/fast/tree/master/packages/web-components">FAST
Components</a> - Library of Web Components based on the FAST design
language.</li>
<li><a
href="https://github.com/microsoft/fluentui/tree/master/packages/web-components">Fluent
UI Web Components</a> - Library of Web Components that supports
Microsoft’s Fluent design language.</li>
<li><a href="https://github.com/tyler-technologies-oss/forge">Forge
Components</a> - Library of Web Components adhering to the Forge Design
System.</li>
<li><a href="https://github.com/tgreyuk/govuk-webcomponents">GOV.UK Web
Components</a> - Set of encapsulated web components consuming the GOV.UK
Design System.</li>
<li><a href="https://github.com/HelixDesignSystem/helix-ui">Helix UI</a>
- Web Component library for the Helix Design System.</li>
<li><a href="https://github.com/emdgroup-liquid/liquid">Liquid</a> - UI
component library based on the Liquid Design System.</li>
<li><a href="https://github.com/lyne-design-system/lyne-components">Lyne
Components</a> - Building blocks of the Lyne Design System are based on
Web Components.</li>
<li><a
href="https://github.com/material-components/material-web">Material Web
Components</a> - Material Design implemented as Web Components.</li>
<li><a
href="https://github.com/momentum-design/momentum-ui/tree/master/web-components">Momentum
UI Web Components</a> - Set of UI components based on Momentum
Design.</li>
<li><a href="https://nordhealth.design">Nord</a> - Nordhealth’s design
system for products, digital experiences and brand.</li>
<li><a href="https://github.com/tenphi/numl">NuML | NUDE Elements</a> -
HTML Framework and Design System based on Web Components and runtime CSS
generation.</li>
<li><a href="https://github.com/phase2/outline">OutlineJS</a> - Web
component based design system starter kit.</li>
<li><a
href="https://github.com/patternfly/patternfly-elements">PatternFly
Elements</a> - Collection of flexible and lightweight Web Components
based on the Unified Design Kit.</li>
<li><a href="https://github.com/ithaka/pharos">Pharos Design System</a>
- JSTOR’s design system to create cohesive, supportive, and beautiful
experiences.</li>
<li><a href="https://github.com/RedHat-UX/red-hat-design-system">Red Hat
Design System</a> - Web components for building uniform experiences with
the Red Hat brand.</li>
<li><a
href="https://github.com/siemens/ix/tree/main/packages/core">Siemens iX
Web Components</a> - Web Components implementing Siemens iX design
system.</li>
<li><a href="https://github.com/adobe/spectrum-web-components">Spectrum
Web Components</a> - Adobe Spectrum design language implementation built
with Web Components.</li>
<li><a href="https://github.com/SAP/ui5-webcomponents">UI5 Web
Components</a> - Set of reusable UI elements implementing SAP Fiori
Design Guidelines.</li>
<li><a href="https://design-system.lib.umich.edu">U-M Library Design
System</a> - University of Michigan Library Design System.</li>
<li><a href="https://github.com/zooplus/zoo-web-components">Zooplus web
components</a> - Set of web components that implement Z+ shop style
guide.</li>
</ul>
<h3 id="use-cases">Use Cases</h3>
<ul>
<li><a
href="https://medium.com/8451/how-we-chose-to-build-our-design-system-using-stenciljs-web-components-4878c36743c5">How
we chose to build our Design System using StencilJS Web
Components</a></li>
<li><a
href="https://www.bryanbraun.com/2020/08/31/how-searching-for-a-bundle-free-react-led-me-to-web-components/">How
searching for a bundle-free React led me to web components</a></li>
<li><a
href="https://medium.com/@sergicontre/reasons-web-components-are-perfect-for-a-big-company-28790d712ad5">Reasons
Web Components are perfect for a big company</a></li>
<li><a
href="https://ionicframework.com/blog/5-reasons-web-components-are-perfect-for-design-systems/">5
Reasons Web Components Are Perfect for Design Systems</a></li>
<li><a href="https://web.dev/web-components-io-2019/">Web components:
the secret ingredient helping power the web</a></li>
<li><a
href="https://dev.to/webpadawan/web-components-for-enterprise-part-1-salesforce-oracle-sap-e70">Web
Components for Enterprise. Part 1: Salesforce, Oracle, SAP</a></li>
<li><a
href="https://dev.to/webpadawan/web-components-for-enterprise-part-2-nuxeo-ionic-vaadin-22l7">Web
Components for Enterprise. Part 2: Nuxeo, Ionic, Vaadin</a></li>
<li><a
href="https://dev.to/shihn/why-i-use-web-components-my-use-cases-1nip">Why
I use Web Components - My use cases</a></li>
<li><a href="https://viljamis.com/2019/why-we-use-web-components/">Why
we use Web Components</a> by <a
href="https://twitter.com/viljamis"><span class="citation"
data-cites="viljamis">@viljamis</span></a></li>
<li><a href="https://dev.to/ionic/why-we-use-web-components-2c1i">Why we
use Web Components</a> by <a href="https://twitter.com/maxlynch"><span
class="citation" data-cites="maxlynch">@maxlynch</span></a></li>
</ul>
<h2 id="libraries">Libraries</h2>
<h3 id="class-based">Class Based</h3>
<ul>
<li><a href="https://github.com/chialab/dna">DNA</a> - Progressive Web
Components library.</li>
<li><a href="https://github.com/webtides/element-js">element-js</a> -
Simple and lightweight base classes for web components with a beautiful
API.</li>
<li><a
href="https://github.com/microsoft/fast/tree/master/packages/web-components/fast-element">FAST
Element</a> - Lightweight library for building performant,
memory-efficient, standards-compliant Web Components.</li>
<li><a href="https://github.com/tyler-technologies-oss/forge-core">Forge
Core</a> - Building blocks and utilities that are used when building
Forge Web Components.</li>
<li><a href="https://github.com/joist-framework/joist">Joist</a> - Set
of small libraries designed to add the bare minimum to web components to
make you productive.</li>
<li><a href="https://lit.dev">Lit</a> - Simple library for building
fast, lightweight web components.</li>
<li><a href="https://github.com/salesforce/lwc">Lightning Web
Components</a> - blazing fast, enterprise-grade Web Components
foundation.</li>
<li><a href="https://github.com/Tencent/omi">Omi</a> - Next generation
web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store +
Path Updating).</li>
<li><a href="https://github.com/mixpanel/panel">Panel</a> - Web
Components + Virtual DOM: web standards for powerful UIs.</li>
<li><a href="https://github.com/slimjs/slim.js">slim.js</a> - Fast &amp;
Robust Front-End Micro-framework based on modern standards.</li>
<li><a href="https://github.com/ionic-team/stencil">Stencil</a> -
Compiler for generating Web Components.</li>
<li><a href="https://github.com/optoolco/tonic">Tonic</a> - Minimalist,
stable, audit friendly component framework.</li>
<li><a href="https://github.com/EasyWebApp/WebCell">WebCell</a> - Web
Components engine based on VDOM, JSX, MobX &amp; TypeScript.</li>
</ul>
<h3 id="functional">Functional</h3>
<ul>
<li><a href="https://github.com/atomicojs/atomico">atomico</a> - Small
library for the creation of interfaces based on web components using
functions and hooks.</li>
<li><a href="https://github.com/matthewp/haunted">haunted</a> - React’s
Hooks API implemented for web components.</li>
<li><a href="https://github.com/hybridsjs/hybrids">hybrids</a> - UI
library for creating Web Components with simple and functional API.</li>
<li><a
href="https://github.com/solidjs/solid/tree/main/packages/solid-element">Solid
Element</a> - Library that extends Solid adding Custom Web Components
and extensions.</li>
</ul>
<h3 id="integrations">Integrations</h3>
<ul>
<li><a
href="https://github.com/Ravenstine/ember-custom-elements">ember-custom-elements</a>
- Render Ember and Glimmer components using custom elements.</li>
<li><a
href="https://github.com/preactjs/preact-custom-element">preact-custom-element</a>
- Generate/register a custom element from a preact component.</li>
<li><a href="https://github.com/adobe/react-webcomponent"><span
class="citation"
data-cites="adobe/react-webcomponent">@adobe/react-webcomponent</span></a>
- Automate the wrapping of a React component in a custom element.</li>
<li><a
href="https://github.com/GrabarzUndPartner/nuxt-custom-elements">nuxt-custom-elements</a>
- Export your project components as custom elements for integration into
external pages.</li>
<li><a href="https://github.com/Wildhoney/ReactShadow">react-shadow</a>
- Utilise Shadow DOM in React with all the benefits of style
encapsulation.</li>
<li><a href="https://github.com/BBKolton/reactify-wc">reactify-wc</a> -
Use web components with React properties and functions.</li>
<li><a href="https://github.com/rstacruz/remount">remount</a> - Mount
React components to the DOM using custom elements.</li>
<li><a href="https://github.com/riot/custom-elements"><span
class="citation"
data-cites="riotjs/custom-elements">@riotjs/custom-elements</span></a> -
Simple API to create vanilla custom elements with Riot.js.</li>
</ul>
<h3 id="benchmarks">Benchmarks</h3>
<ul>
<li><a
href="https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/">All
the Ways to Make a Web Component</a></li>
<li><a
href="https://vogloblinsky.github.io/web-components-benchmark/">web-components-benchmark</a>
- Benchmark Web Components technologies with various examples.</li>
<li><a href="https://wc-todo.firebaseapp.com/">web-components-todo</a> -
The same todo application built in different Web Components libraries
for benchmark purpose.</li>
</ul>
<h2 id="frameworks">Frameworks</h2>
<h3 id="angular">Angular</h3>
<ul>
<li><a href="https://angular.io/guide/elements">Angular Elements
Overview</a></li>
<li><a
href="https://indepth.dev/building-and-bundling-web-components/">Building
and consuming Angular Elements as Web Components</a></li>
<li><a
href="https://itnext.io/how-to-use-angular-ngmodel-and-ngforms-with-webcomponents-802bd9e1d3d7">How
to use Angular ngModel and ngForms with WebComponents</a></li>
<li><a
href="https://coryrylan.com/blog/using-web-components-in-angular">Using
Web Components in Angular</a></li>
<li><a
href="https://www.softwarearchitekt.at/post/2019/05/18/web-components-custom-elements-with-angular-ivy-in-6-steps.aspx">Web
Components With Angular Ivy In 6 Steps</a></li>
</ul>
<h3 id="react">React</h3>
<ul>
<li><a
href="https://css-tricks.com/3-approaches-to-integrate-react-with-custom-elements/">3
Approaches to Integrate React with Custom Elements</a></li>
<li><a
href="https://css-tricks.com/building-interoperable-web-components-react/">Building
Interoperable Web Components That Even Work With React</a></li>
<li><a
href="https://guillaumebriday.fr/rendering-react-components-with-custom-elements">Rendering
React Components With Custom Elements</a></li>
<li><a href="https://www.robinwieruch.de/react-web-components">How to
use Web Components in React</a></li>
<li><a
href="https://css-tricks.com/using-web-components-with-next-or-any-ssr-framework/">Using
Web Components With Next (or Any SSR Framework)</a></li>
</ul>
<h3 id="vue">Vue</h3>
<ul>
<li><a
href="https://coryrylan.com/blog/using-web-components-in-vue">Using Web
Components in Vue</a></li>
</ul>
<h3 id="svelte">Svelte</h3>
<ul>
<li><a href="https://svelte.dev/docs#Custom_element_API">Svelte Custom
Element API</a></li>
<li><a
href="https://dev.to/silvio/how-to-create-a-web-components-in-svelte-2g4j">How
to Create a Web Component in Svelte</a></li>
<li><a
href="https://itnext.io/svelte-web-component-5-4kb-4afe46590d99">Svelte
Web Component — 5.4KB</a></li>
</ul>
<h2 id="ecosystem">Ecosystem</h2>
<h2 id="meta-frameworks">Meta Frameworks</h2>
<ul>
<li><a href="https://github.com/ampproject/amphtml">AMP</a> - Web
component framework to easily create user-first experiences for the
web.</li>
<li><a href="https://enhance.dev/docs/">Enhance</a> - Web
standards-based HTML framework for building lightweight web
applications.</li>
<li><a href="https://github.com/webtides/luna-js">luna-js</a> - SSR
framework that makes working with the WebComponents standard a
breeze.</li>
<li><a href="https://rocket.modern-web.dev">Rocket</a> - Modern web
setup for static sites with a sprinkle of JavaScript.</li>
<li><a href="https://github.com/ProjectEvergreen/wcc">Web Components
Compiler</a> - Compiler to make server-side rendering of native web
components easier.</li>
<li><a href="https://github.com/11ty/webc">WebC</a> -
Framework-independent standalone HTML serializer for generating markup
for web components.</li>
</ul>
<h3 id="starter-kits">Starter Kits</h3>
<ul>
<li><a href="https://open-wc.org/docs/development/generator/">Create
Open Web Components</a> - Web component project scaffolding.</li>
<li><a
href="https://github.com/github/custom-element-boilerplate">custom-element-boilerplate</a>
- Boilerplate for creating a custom element.</li>
<li><a
href="https://github.com/fernandopasik/hello-web-components">hello-web-components</a>
- Simple starter hello world web component written in TypeScript.</li>
<li><a href="https://github.com/abraham/nutmeg">nutmeg</a> - Build,
test, and publish vanilla Web Components with a little spice.</li>
</ul>
<h3 id="testing-solutions">Testing Solutions</h3>
<ul>
<li><a
href="https://github.com/yuki24/capybara-shadowdom">capybara-shadowdom</a>
- Ruby gem that adds basic support for the Shadow DOM to Capybara.</li>
<li><a
href="https://dev.to/simonireilly/cypress-component-tests-for-lit-elements-web-components-45oj">Cypress
component tests for Lit</a> - How to run component tests for a Lit web
component with Cypress.</li>
<li><a
href="https://github.com/simonireilly/cypress-lit">cypress-lit</a> -
Test your Lit elements and native web components in Cypress with all the
modern browsers.</li>
<li><a
href="https://open-wc.org/guides/developing-components/testing/">Developing
Components: Testing</a> - Using <span class="citation"
data-cites="web/test-runner">@web/test-runner</span> for testing web
components in a real browser.</li>
<li><a
href="https://www.lambdatest.com/blog/shadow-dom-in-selenium/">How To
Automate Shadow DOM In Selenium WebDriver</a> - Locating Shadow DOM
elements using Selenium WebDriver in a Maven project.</li>
<li><a
href="https://staleelement.medium.com/native-automation-support-for-shadow-dom-with-webdriverio-and-cypress-chapter-3-26249a589f5e">Native
Automation support for Shadow DOM</a> - Shadow DOM and open-source
testing frameworks.</li>
<li><a href="https://open-wc.org/docs/testing/testing-package/">Open Web
Components: Testing</a> - Opinionated package that combines and
configures testing libraries.</li>
<li><a
href="https://github.com/webdriverio/query-selector-shadow-dom">query-selector-shadow-dom</a>
- querySelector that can pierce Shadow DOM roots, useful for automated
testing.</li>
<li><a
href="https://github.com/sukgu/shadow-automation-selenium">shadow-automation-selenium</a>
- Shadow DOM automation using Selenium.</li>
<li><a
href="https://reflect.run/articles/testing-shadow-dom-elements-in-selenium/">Testing
Shadow DOM elements in Selenium</a> - In Selenium 4, there is now a way
to access Shadow DOM nodes.</li>
<li><a
href="https://alexbilson.dev/plants/technology/test-web-components-with-playwright/">Test
web components with Playwright</a> - So you’ve created a native web
component or two. How do you test them in popular browsers?</li>
<li><a
href="https://staleelement.medium.com/w3c-webdriver-conquering-automation-of-shadow-dom-chapter-2-d92c7fe9e74c">W3C
Webdriver conquering automation of Shadow DOM</a> - Shadow DOM tree and
its interaction with the W3C Webdriver.</li>
</ul>
<h3 id="tools">Tools</h3>
<ul>
<li><a href="https://backlight.dev/">Backlight</a> — 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.</li>
<li><a href="https://github.com/open-wc/locator">Custom Elements
Locator</a> - Chrome extension to find custom elements on a page.</li>
<li><a
href="https://www.npmjs.com/package/@storybook/web-components"><span
class="citation"
data-cites="storybook/web-components">@storybook/web-components</span></a>
- UI development environment for plain web-component snippets.</li>
<li><a href="https://webcomponents.dev">webcomponents.dev</a> -
Component IDE for web platform developers.</li>
<li><a
href="https://github.com/runem/web-component-analyzer">web-component-analyzer</a>
- CLI that analyzes web components and emits documentation /
diagnostics.</li>
<li><a href="https://github.com/kcmr/web-components-codemods">Web
Components Codemods</a> - Codemods for Web Components.</li>
</ul>
<h2 id="books">Books</h2>
<ul>
<li><a href="https://www.manning.com/books/web-components-in-action">Web
Components in Action</a> - Book by Ben Farrell, available at Manning
early release program.</li>
<li><a href="https://leanpub.com/web-component-essentials">Web Component
Essentials</a> - Book by Cory Rylan, early preview edition available at
Leanpub.</li>
</ul>
<h2 id="tutorials">Tutorials</h2>
<ul>
<li><a
href="https://dev.to/aspittel/building-web-components-with-vanilla-javascript--jho">Building
Web Components with Vanilla JavaScript</a></li>
<li><a
href="https://css-tricks.com/creating-a-custom-element-from-scratch/">Creating
a Custom Element from Scratch</a></li>
<li><a
href="https://marcoslooten.com/blog/creating-a-reusable-avatar-web-component/">Creating
a Reusable Avatar Web Component</a></li>
<li><a
href="https://auth0.com/blog/creating-web-components-with-stencil/">Creating
Web Components with Stencil</a></li>
<li><a
href="https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/">Encapsulating
Style and Structure with Shadow DOM</a></li>
<li><a
href="https://labs.thisdot.co/blog/getting-started-with-litelement-and-typescript">Getting
started with LitElement and TypeScript</a></li>
<li><a
href="https://dev.to/thepassle/web-components-from-zero-to-hero-4n4m">Web
Components: from zero to hero</a></li>
<li><a
href="https://www.thinktecture.com/web-components/dependency-injection/">Deep
Dive: Web Components &amp; Dependency Injection – The
Experiment</a></li>
<li><a
href="https://itnext.io/handling-data-with-web-components-9e7e4a452e6e">Handling
data with Web Components</a></li>
<li><a
href="https://towardsdatascience.com/how-to-use-d3js-with-webcomponents-a75ae4f980de">How
to use D3js with WebComponents</a></li>
<li><a
href="https://labs.thisdot.co/blog/navigation-lifecycle-using-vaadin-router-litelement-and-typescript">Navigation
Lifecycle using Vaadin Router, LitElement and TypeScript</a></li>
<li><a
href="https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg/">Recreating
The Arduino Pushbutton Using SVG And
<code>&lt;lit-element&gt;</code></a></li>
<li><a
href="https://labs.thisdot.co/blog/routing-management-with-litelement">Routing
Management with LitElement and TypeScript</a></li>
<li><a
href="https://dev.to/dntzhang/snake-eating-game-making-with-web-components-of-omi-and-mvp-architecture-206">Snake-Eating
Game Making with Web Components of Omi and MVP Architecture</a></li>
<li><a
href="https://www.thinktecture.com/web-components/stenciljs-web-components-on-steroids/">Stencil
– Web Components On Steroids</a></li>
<li><a
href="https://coryrylan.com/blog/using-modern-web-components">Using
Modern Web Components</a></li>
<li><a
href="https://css-tricks.com/using-web-components-in-wordpress-is-easier-than-you-think/">Using
Web Components in WordPress is Easier Than You Think</a></li>
<li><a
href="https://coderpad.io/blog/development/web-components-101-framework-comparison/">Web
Components 101: Framework Comparison</a></li>
<li><a
href="https://coderpad.io/blog/development/web-components-101-lit-framework/">Web
Components 101: Lit Framework</a></li>
<li><a
href="https://www.nexmo.com/blog/2020/05/20/web-components-tools-a-comparison">Web
Components Tools: A Comparison</a></li>
<li><a
href="https://dev.to/alangdm/where-to-begin-building-web-components-the-basics-3b78">Where
to begin building Web Components? - The Basics</a></li>
<li><a
href="https://dev.to/alangdm/where-to-begin-building-web-components-class-based-libraries-18m6">Where
to begin building Web Components? - Class-based Libraries</a></li>
</ul>
<h2 id="insights">Insights</h2>
<h3 id="podcasts">Podcasts</h3>
<ul>
<li><a
href="https://www.heroku.com/podcasts/codeish/38-building-with-web-components">Code[ish],
episode 38: Building with Web Components</a></li>
<li><a
href="https://frontendhappyhour.com/episodes/web-components-shots-of-shadow-dom/">Frontend
Happy Hour, episode 62: Web Components - shots of shadow DOM</a></li>
<li><a
href="https://labstalk.buzzsprout.com/993481/3932975-web-components-with-peter-muessig">Labs
Talk - Web Components with Peter Muessig</a></li>
<li><a href="https://realtalkjavascript.simplecast.fm/eaf3db9e">Real
Talk JavaScript, episode 7: Custom Web Components with Rob
Wormald</a></li>
<li><a
href="https://realtalkjavascript.simplecast.com/episodes/episode-101-back-to-basics-with-native-html-and-litelement">Real
Talk JavaScript, episode 101: Back to Basics with Native HTML and
LitElement</a></li>
</ul>
<h3 id="presentations">Presentations</h3>
<ul>
<li><a
href="https://noti.st/lostinbrittany/EjUZyd/are-web-components-the-betamax-of-web-development">Are
Web Components the Betamax of web development?</a> by <a
href="https://twitter.com/lostinbrittany"><span class="citation"
data-cites="lostinbrittany">@lostinbrittany</span></a></li>
<li><a
href="https://drive.google.com/file/d/1ALFiWOFU0UAGUpaZPMIVnoADs9_REtL5/view">Designing
Standard Systems</a> by <a href="https://twitter.com/stefsull"><span
class="citation" data-cites="stefsull">@stefsull</span></a> and <a
href="https://twitter.com/bferrua"><span class="citation"
data-cites="bferrua">@bferrua</span></a></li>
<li><a
href="https://events.drupal.org/seattle2019/sessions/design-system-architecture-pattern-lab-twig-and-web-components">Frontend
Architecture for Scalable Design Systems</a> by <a
href="https://twitter.com/salem_cobalt"><span class="citation"
data-cites="salem_cobalt">@salem_cobalt</span></a></li>
<li><a href="https://apolloelements.dev/using-lit-apollo/">lit-apollo:
Data-Driven Components that Use the Platform</a> by <a
href="https://twitter.com/PowersBenny"><span class="citation"
data-cites="PowersBenny">@PowersBenny</span></a></li>
<li><a
href="https://martine-dowden.github.io/portfolio/presentation/mastering-shadow-dom">Mastering
Shadow DOM</a> by <a href="https://twitter.com/Martine_Dowden"><span
class="citation"
data-cites="Martine_Dowden">@Martine_Dowden</span></a></li>
<li><a
href="https://speakerdeck.com/samjulien/modernizing-large-frontends-with-web-components">Modernizing
Large Frontends with Web Components</a> by <a
href="https://twitter.com/samjulien"><span class="citation"
data-cites="samjulien">@samjulien</span></a></li>
<li><a
href="https://docs.google.com/presentation/d/1wi74YiTLtLSfgjyccKm5LxYp9k8aeJda0AekWV5mqJI/edit?usp=sharing">Shadow
DOM: off the beaten track</a> by <a
href="https://twitter.com/serhiikulykov"><span class="citation"
data-cites="serhiikulykov">@serhiikulykov</span></a></li>
<li><a
href="https://gotochgo.com/2019/sessions/866/using-web-components-to-build-a-framework-agnostic-ui-library">Using
Web Components to Build a Framework-agnostic UI Library</a> by <a
href="https://twitter.com/brianbouril"><span class="citation"
data-cites="brianbouril">@brianbouril</span></a> and <a
href="https://twitter.com/danciupuliga"><span class="citation"
data-cites="danciupuliga">@danciupuliga</span></a></li>
<li><a href="https://decks.tink.uk/2019/jsconf/index.html">Web
Components and the AOM</a> by <a
href="https://twitter.com/LeonieWatson"><span class="citation"
data-cites="LeonieWatson">@LeonieWatson</span></a></li>
<li><a
href="https://www.dropbox.com/s/wdh9uufjui5htll/Web-Components-and-Styles-Scoping-by-bashmish-FrontMania-2018.pdf">Web
Components and Styles Scoping</a> by <a
href="https://twitter.com/bashmish"><span class="citation"
data-cites="bashmish">@bashmish</span></a></li>
<li><a
href="https://slides.com/vogloblinsky/web-components-can-do-that">Web
Components can do that?!</a> by <a
href="https://twitter.com/vogloblinsky"><span class="citation"
data-cites="vogloblinsky">@vogloblinsky</span></a></li>
<li><a href="https://webcomponents.dev/blog/web-components-slides/">Web
Components: Introduction and State of the Art</a> by <a
href="https://twitter.com/webcomp_dev"><span class="citation"
data-cites="webcomp_dev">@webcomp_dev</span></a></li>
</ul>
<h3 id="talks">Talks</h3>
<ul>
<li><a href="https://youtu.be/mtHf7crZZIQ">Better Apps: Delivering
Universal UI Patterns as Web Components</a> by <a
href="https://twitter.com/janmiksovsky"><span class="citation"
data-cites="janmiksovsky">@janmiksovsky</span></a></li>
<li><a href="https://vimeo.com/364370506">Custom Web Shadow Elements, or
Whatever…</a> by <a href="https://twitter.com/aerotwist"><span
class="citation" data-cites="aerotwist">@aerotwist</span></a></li>
<li><a href="https://youtu.be/FM7ROEVPA4k">Styling and Theming Web
Components</a> by <a href="https://twitter.com/justinfagnani"><span
class="citation"
data-cites="justinfagnani">@justinfagnani</span></a></li>
<li><a href="https://youtu.be/iFp-P2UJT_Y">Web Components at Enterprise
Scale</a> by <a href="https://twitter.com/diervo"><span class="citation"
data-cites="diervo">@diervo</span></a></li>
</ul>
<h2 id="usage-metrics">Usage Metrics</h2>
<ul>
<li><a
href="https://chromestatus.com/metrics/feature/timeline/popularity/1689">Chrome
Platform Status: <code>CustomElementRegistryDefine</code></a></li>
<li><a
href="https://chromestatus.com/metrics/feature/timeline/popularity/804">Chrome
Platform Status: <code>ElementAttachShadow</code></a></li>
<li><a
href="https://chromestatus.com/metrics/feature/timeline/popularity/2769">Chrome
Platform Status: <code>HTMLTemplateElement</code></a></li>
</ul>
<h2 id="proposals">Proposals</h2>
<h3 id="form-associated-custom-elements">Form-associated Custom
Elements</h3>
<ul>
<li><a
href="https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit?usp=sharing">Form
Participation API Explained</a> - Document by Google Chrome team.</li>
<li><a
href="https://www.chromestatus.com/features/4708990554472448">Form-associated
custom elements</a> - Feature in Chrome platform status.</li>
<li><a
href="https://github.com/web-platform-tests/wpt/tree/master/custom-elements/form-associated">web-platform-tests</a></li>
</ul>
<h3 id="constructable-stylesheet-objects">Constructable Stylesheet
Objects</h3>
<ul>
<li><a
href="https://wicg.github.io/construct-stylesheets/">Specification
Draft</a></li>
<li><a
href="https://github.com/web-platform-tests/wpt/blob/master/css/cssom/CSSStyleSheet-constructable.html">web-platform-tests</a></li>
<li><a
href="https://github.com/WICG/construct-stylesheets/blob/gh-pages/explainer.md">Explainer</a></li>
<li><a
href="https://www.chromestatus.com/feature/5394843094220800">Constructable
Stylesheets</a> - Feature in Chrome platform status.</li>
</ul>
<h3 id="custom-state-pseudo-class">Custom State Pseudo Class</h3>
<ul>
<li><a
href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/CApU9QIu3TM">Blink:
Intent to implement</a></li>
<li><a
href="https://github.com/w3c/webcomponents/blob/gh-pages/proposals/custom-states-and-state-pseudo-class.md"><code>ElementInternals</code>’s
<code>states</code> property and the <code>:state()</code> pseudo
class</a></li>
</ul>
<h2 id="miscellaneous">Miscellaneous</h2>
<ul>
<li><a href="https://github.com/Heydon/bruck">bruck</a> - Prototyping
system built with web components and the Houdini Paint API.</li>
<li><a href="https://vaadin.com/directory">Vaadin Directory</a> -
Publish, discuss and rate web components</li>
<li><a href="http://webcomponents.org/">webcomponents.org</a> - Discuss
&amp; share web components.</li>
</ul>
<h2 id="archive">Archive</h2>
<h3 id="polyfills">Polyfills</h3>
<p>Modern browsers supports web components standards without any of the
polyfills listed below. The only notable exception is that customized
built-in elements are rejected by WebKit (Safari).</p>
<h4 id="custom-elements-polyfills">Custom Elements polyfills</h4>
<ul>
<li><a
href="https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements"><span
class="citation"
data-cites="webcomponents/custom-elements">@webcomponents/custom-elements</span></a>
- Custom Elements polyfill by Polymer team.</li>
<li><a
href="https://github.com/WebReflection/document-register-element">document-register-element</a>
- Custom Elements polyfill by Andrea Giammarchi.</li>
</ul>
<h4 id="customized-built-in-elements-polyfills">Customized Built-in
Elements polyfills</h4>
<ul>
<li><a
href="https://github.com/corpusculejs/custom-builtin-elements"><span
class="citation"
data-cites="corpuscule/custom-builtin-elements">@corpuscule/custom-builtin-elements</span></a>
- Customized built-in elements polyfill by <a
href="https://github.com/corpusculejs">CorpusculeJS</a>.</li>
<li><a href="https://github.com/ungap/custom-elements-builtin"><span
class="citation"
data-cites="ungap/custom-elements-builtin">@ungap/custom-elements-builtin</span></a>
- Customized built-in elements polyfill by <a
href="https://ungap.github.io">ungap project</a>.</li>
</ul>
<h4 id="shadow-dom-shims">Shadow DOM shims</h4>
<ul>
<li><a
href="https://github.com/webcomponents/polyfills/tree/master/packages/shadydom"><span
class="citation"
data-cites="webcomponents/shadydom">@webcomponents/shadydom</span></a> -
ShadowDOM v1 shim.</li>
<li><a
href="https://github.com/webcomponents/polyfills/tree/master/packages/shadycss"><span
class="citation"
data-cites="webcomponents/shadycss">@webcomponents/shadycss</span></a> -
ShadowDOM style encapsulation shim.</li>
<li><a
href="https://github.com/salesforce/lwc/blob/master/packages/@lwc/synthetic-shadow"><span
class="citation"
data-cites="lwc/synthetic-shadow">@lwc/synthetic-shadow</span></a> -
Shadow DOM polyfill by <a href="https://lwc.dev">LWC</a>.</li>
</ul>
<h4 id="html-templates-polyfills">HTML Templates polyfills</h4>
<ul>
<li><a
href="https://github.com/webcomponents/polyfills/tree/master/packages/template"><span
class="citation"
data-cites="webcomponents/template">@webcomponents/template</span></a> -
Minimal polyfill for <code>&lt;template&gt;</code>.</li>
<li><a href="https://github.com/ungap/import-node"><span
class="citation"
data-cites="ungap/import-node">@ungap/import-node</span></a> - An
<code>importNode</code> polyfill for IE11 by <a
href="https://ungap.github.io">ungap project</a>.</li>
</ul>
<h3 id="history">History</h3>
<p>The articles below represent a long story of the Web Components
specifications on the way towards the standardization. Some of them
refer to earlier, so-called “v0” Shadow DOM and Custom Elements specs,
and abandoned HTML Imports spec. These materials are here for historical
reasons only, they are grouped by years and listed in chronological
order.</p>
<h4 id="section">2019</h4>
<ul>
<li><a
href="https://component.kitchen/blog/posts/a-history-of-the-html-slot-element">A
history of the HTML slot element</a></li>
<li><a
href="https://codeburst.io/web-components-for-cross-framework-component-libraries-2647741f9470">Web
Components for Cross-Framework Component Libraries</a></li>
<li><a
href="https://codeburst.io/web-components-in-2019-part-1-6bd7251edce5">Web
Components in 2019: Part 1</a></li>
<li><a
href="https://codeburst.io/web-components-in-2019-part-2-a7de8c770c5a">Web
Components in 2019: Part 2</a></li>
<li><a
href="https://codeburst.io/web-components-in-2019-part-3-e725b781a414">Web
Components in 2019: Part 3</a></li>
<li><a
href="https://codeburst.io/web-components-in-2019-part-4-7fe8e63a4dee">Web
Components in 2019: Part 4</a></li>
<li><a
href="https://medium.com/angular-in-depth/developments-in-web-components-im-excited-about-in-2019-3ae7751c2f64">Developments
in Web Components I’m excited about in 2019</a></li>
</ul>
<h4 id="section-1">2018</h4>
<ul>
<li><a
href="https://medium.com/@cfscorreia/styling-accessibility-a-web-components-approach-dc2aa8123eb2">Styling
Accessibility: A Web Components Approach</a></li>
<li><a
href="https://www.telerik.com/blogs/web-components-101-an-introduction-to-web-components">Web
Components 101: An Introduction to Web Components</a></li>
<li><a
href="https://medium.com/@royprins/get-started-with-vue-web-components-593b3d5b3200">Get
started with Vue web components</a></li>
<li><a
href="https://codeburst.io/6-reasons-you-should-use-native-web-components-b45e18e069c2">6
Reasons You Should Use Native Web Components</a></li>
<li><a href="https://www.sitepen.com/blog/web-components-in-2018">Web
Components in 2018</a></li>
<li><a
href="https://www.grapecity.com/en/blogs/web-components-introduction-creating-custom-html-elements-2018">Web
Components Introduction: Creating Custom HTML Elements in 2018</a></li>
<li><a
href="https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/">Create
&amp; Publish Web Components With Vue CLI 3</a></li>
<li><a
href="https://medium.com/revillweb/extending-native-dom-elements-with-web-components-233350c8e86a">Extending
Native DOM Elements with Web Components</a></li>
</ul>
<h4 id="section-2">2017</h4>
<ul>
<li><a
href="https://component.kitchen/blog/posts/styling-is-critical-to-web-component-reuse-but-may-prove-difficult-in-practice">Styling
is critical to web component reuse, but may prove difficult in
practice</a></li>
<li><a
href="https://infrequently.org/2017/10/web-components-the-long-game/">Web
Components: The Long Game</a></li>
<li><a href="https://youtu.be/y-8Lmg5Gobw">Web Components: Just in the
Nick of Time (Polymer Summit 2017)</a></li>
<li><a href="https://youtu.be/UfD-k7aHkQE">Using Web Components in Ionic
(Polymer Summit 2017)</a></li>
<li><a href="https://youtu.be/8GmTu2JF4-0">Web Components for VR
(Polymer Summit 2017)</a></li>
<li><a href="https://youtu.be/FJ2KEvzlyo4">Building UI at Enterprise
Scale with Web Components (Polymer Summit 2017)</a></li>
<li><a href="https://youtu.be/sK1ODp0nDbM">Custom Elements Everywhere
(Polymer Summit 2017)</a></li>
<li><a href="https://youtu.be/rvpJ5O0W_6A">Evolving the Next Generation
of Polymer Elements (Polymer Summit 2017)</a></li>
<li><a href="https://youtu.be/tNulrEbTQf8">Polymer @ YouTube (Polymer
Summit 2017)</a></li>
<li><a href="https://youtu.be/c-WDHG6rrdU">Web Components for CMS
(Polymer Summit 2017)</a></li>
<li><a href="https://meowni.ca/posts/web-components-with-otters/">An
intro to web components with otters</a></li>
<li><a
href="https://dmitriid.com/blog/2017/03/the-broken-promise-of-web-components/">The
broken promise of Web Components</a></li>
<li><a
href="http://robdodson.me/regarding-the-broken-promise-of-web-components/">Regarding
the broken promise of Web Components</a></li>
<li><a href="https://web.dev/webcomponents-org/">Web Components v1 - the
next generation</a></li>
</ul>
<h4 id="section-3">2016</h4>
<ul>
<li><a
href="https://webkit.org/blog/7027/introducing-custom-elements/">Introducing
Custom Elements</a></li>
<li><a
href="https://medium.com/dev-channel/the-case-for-custom-elements-part-1-65d807b4b439">The
Case for Custom Elements: Part 1</a></li>
<li><a
href="https://medium.com/dev-channel/the-case-for-custom-elements-part-2-2efe42ce9133">The
Case for Custom Elements: Part 2</a></li>
<li><a
href="http://www.backalleycoder.com/2016/08/26/demythstifying-web-components/">Demythstifying
Web Components</a></li>
<li><a href="https://adactio.com/journal/11052">Extensible web
components</a></li>
<li><a
href="https://blog.revillweb.com/web-component-challenges-a09ebc598d65">Web
Component Challenges</a></li>
<li><a
href="https://onishi.ltd/articles/2016/08/web-components-and-progressive-enhancement/">Web
Components and progressive enhancement</a></li>
<li><a
href="https://annevankesteren.nl/2015/07/shadow-dom-custom-elements-update">Update
on standardizing Shadow DOM and Custom Elements</a></li>
<li><a href="https://hayatoito.github.io/2016/shadowdomv1/">What’s New
in Shadow DOM v1 (by examples)</a></li>
<li><a
href="https://blog.revillweb.com/why-web-components-are-so-important-66ad0bd4807a">Why
web components are so important</a></li>
<li><a
href="https://medium.com/the-ui-files/understanding-web-components-d051baa66019">Understanding
Web Components</a></li>
</ul>
<h4 id="section-4">2015</h4>
<ul>
<li><a
href="https://webkit.org/blog/4096/introducing-shadow-dom-api/">Introducing
Slot-Based Shadow DOM API</a></li>
<li><a
href="https://medium.com/synsugar/there-is-an-element-for-that-a9fcdafe4a25">There
is an Element for that</a></li>
<li><a href="https://2ality.com/2015/08/web-component-status.html">What
happened to Web Components?</a></li>
<li><a href="http://kaytcat.github.io/web-components/">Web Components
and their role in the future of web development</a></li>
<li><a
href="https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/">Microsoft
Edge and Web Components</a></li>
<li><a
href="https://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/">Bringing
componentization to the web: An overview of Web Components</a></li>
<li><a
href="https://medium.com/@kaelig/why-web-components-will-make-the-web-a-better-place-for-our-users-38dc3154fc1d">Why
Web Components will make the web a better place for our users</a></li>
<li><a
href="https://www.ianfeather.co.uk/practical-questions-around-web-components/">Practical
Questions around Web Components</a></li>
<li><a
href="https://hacks.mozilla.org/2015/06/the-state-of-web-components/">The
state of Web Components</a></li>
</ul>
<h4 id="section-5">2014</h4>
<ul>
<li><a
href="http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-1-the-specs/">A
No-Nonsense Guide to Web Components, Part 1: The Specs</a></li>
<li><a
href="http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-2-practical-use/">A
No-Nonsense Guide to Web Components, Part 2: Practical Use</a></li>
<li><a href="https://youtu.be/dztuKgjk0Bg">Web Components + Backbone: A
Game-Changing Combination</a></li>
<li><a
href="https://hacks.mozilla.org/2014/12/mozilla-and-web-components/">Mozilla
and Web Components: Update</a></li>
<li><a href="https://youtu.be/MdcD1rNkNLE">Server-less applications
powered by Web Components</a></li>
<li><a href="https://youtu.be/QHxrr6Q82yI">Web Components and the Future
of CSS</a></li>
<li><a href="https://youtu.be/6vcQlD-jadk">Easy composition and reuse
with Web Components</a></li>
<li><a href="https://youtu.be/kV0hgdMpH28">Let’s build some apps with
Polymer!</a></li>
<li><a href="https://youtu.be/0LT6W5QVCJI">Polymer: State of the
Union</a></li>
<li><a href="https://youtu.be/hEzmy93zr0Y?t=540">Web Components 101: An
Introduction to Fundamental Changes in HTML</a></li>
<li><a href="https://youtu.be/dwxaG-eoxdU">Web Components 201: Designing
Web Components for Reuse</a></li>
<li><a
href="https://medium.com/@shaunwalla/why-web-components-does-the-web-really-need-another-component-4af010b6446">Why
Web Components — Does the Web Really Need Another Component?</a></li>
<li><a href="https://youtu.be/gSTNTXtQwaY">“Don’t stop thinking about
tomorrow” - AngularJS and Web Components</a></li>
<li><a href="https://youtu.be/kn0y7uugO0Y">Multi-device Apps with Web
Components</a></li>
<li><a href="https://youtu.be/nbsWP2cPhhU">As I Walk Through The Valley
Of The Shadow Of DOM</a></li>
<li><a
href="https://www.telerik.com/blogs/web-components-ready-production">Why
Web Components Are Ready For Production</a></li>
<li><a
href="https://www.leggetter.co.uk/2014/08/06/state-componentised-web.html">The
State of the Componentised Web</a></li>
<li><a
href="https://www.tjvantoll.com/2014/07/18/an-addendum-to-why-web-components-arent-ready-for-production-yet/">An
Addendum to Why Web Components Aren’t Ready for Production Yet</a></li>
<li><a
href="https://www.telerik.com/blogs/web-components-arent-ready-production-yet">Why
Web Components Aren’t Ready for Production… Yet</a></li>
<li><a
href="https://addyosmani.com/blog/component-interop-with-react-and-custom-elements/">Component
Interop With React And Custom Elements</a></li>
<li><a href="https://youtu.be/BgvDZZ8Ms8c">Accessibility of Web
Components</a></li>
<li><a href="https://youtu.be/GOPXVLxp9Nc">Componentize The Web: Back To
The Browser!</a></li>
<li><a href="https://youtu.be/yRbOSdAe_JU">Google I/O 2014 - Polymer and
the Web Components revolution</a></li>
<li><a href="https://youtu.be/8OJ7ih8EE7s">Google I/O 2014 - Polymer and
Web Components change everything you know about Web development</a></li>
<li><a href="https://youtu.be/HKrYfrAzqFA">Google I/O 2014 - Unlock the
next era of UI development with Polymer</a></li>
<li><a href="https://youtu.be/_IBiXfxhF-A">Making Polymer Elements
Accessible</a></li>
<li><a
href="https://developer.paciellogroup.com/blog/2014/06/accessible-disclosure-button-using-web-components/">Building
an Accessible Disclosure Button – using Web Components</a></li>
<li><a href="https://youtu.be/yLyyXHhSl8w">The Road to Web
Components</a></li>
<li><a href="https://youtu.be/3QLmAm9xtnU">The Web Components Revolution
is Here</a></li>
<li><a href="https://youtu.be/JUzjr1bIRUg">Web Components: A chance to
create the future</a></li>
<li><a href="https://youtu.be/75EuHl6CSTo">Web Component Mashups at 3
a.m.</a></li>
<li><a href="https://youtu.be/iPmN4CvLGJc">Web Components Tools &amp;
Libraries</a></li>
<li><a href="https://addyosmani.com/fitc-wccdt/">Web Components Can Do
That?!</a></li>
<li><a
href="https://christianheilmann.com/2014/04/18/web-components-and-you-dangers-to-avoid/">Web
Components and you – dangers to avoid</a></li>
<li><a href="https://github.com/domenic/html-as-custom-elements">HTML as
Custom Elements</a></li>
<li><a
href="https://addyosmani.com/blog/the-webs-declarative-composable-future/">The
Web’s Declarative, Composable Future</a></li>
<li><a
href="https://code.tutsplus.com/tutorials/using-polymer-to-create-web-components--cms-20475">Using
Polymer to Create Web Components</a></li>
<li><a href="https://gist.github.com/dglazkov/efd2deec54f65aa86f2e">The
Shadow DOM Diaries</a></li>
<li><a
href="https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/">A
Detailed Introduction To Custom Elements</a></li>
</ul>
<h4 id="section-6">2013</h4>
<ul>
<li><a
href="https://speakerdeck.com/zenorocha/a-future-called-web-components">A
future called Web Components</a></li>
<li><a href="https://youtu.be/dW2ib0bkxGQ">Building Mobile Web
Applications With Brick</a></li>
<li><a href="https://youtu.be/DH1vTVkqCDQ">Polymer: declarative,
encapsulated, and reusable components for the web</a></li>
<li><a href="https://youtu.be/s1PTPZwzQA4">Web Components: Why you’re
already an expert</a></li>
<li><a href="https://youtu.be/booRxAJblwM">Yo Polymer: a new way of
building web apps</a></li>
<li><a
href="https://www.stevesouders.com/blog/2013/11/26/performance-and-custom-elements/">Performance
and Custom Elements</a></li>
<li><a href="https://robdodson.github.io/webcomponents-revolution/">Web
Components Revolution</a></li>
<li><a href="https://css-tricks.com/modular-future-web-components/">A
Guide to Web Components</a></li>
<li><a href="https://vimeo.com/78899868">Return of Inspector Web: Web
Components a Year Later</a></li>
<li><a href="https://web.dev/customelements/">Working with Custom
Elements</a></li>
<li><a
href="https://blog.teamtreehouse.com/creating-reusable-markup-with-the-html-template-element">Creating
Reusable Markup with The HTML Template Element</a></li>
<li><a
href="https://blog.teamtreehouse.com/working-with-shadow-dom">Working
with Shadow DOM</a></li>
<li><a href="https://www.lukew.com/ff/entry.asp?1752">Breaking
Development: Web Components</a></li>
<li><a href="https://youtu.be/fqULJBBEVQE">Web Components: A Tectonic
Shift for Web Development - Google I/O 2013</a></li>
<li><a href="https://vimeo.com/68212204">Web Components: Getting
Started</a></li>
<li><a href="https://web.dev/shadowdom/">Shadow DOM 101</a></li>
<li><a href="https://web.dev/shadowdom-201/">Shadow DOM 201</a></li>
<li><a href="https://web.dev/shadowdom-301/">Shadow DOM 301</a></li>
<li><a
href="https://developer.chrome.com/blog/visualizing-shadow-dom-concepts/">Visualizing
shadow DOM concepts</a></li>
<li><a href="https://youtu.be/pb6DsPNdoXk">Web components and the future
of web development</a></li>
<li><a href="https://web.dev/webcomponents-template/">HTML’s New
Template Tag</a></li>
</ul>
<h4 id="section-7">2012</h4>
<ul>
<li><a
href="https://www.sitepoint.com/the-basics-of-the-shadow-dom/">The
Basics of the Shadow DOM</a></li>
<li><a
href="https://developer.paciellogroup.com/blog/2012/07/notes-on-web-components-aria/">Notes
on Web Components + ARIA</a></li>
<li><a href="https://youtu.be/2txPYQOWBtg">Google I/O 2012 - The Web
Platform’s Cutting Edge</a></li>
<li><a
href="https://www.w3.org/TR/2012/WD-components-intro-20120522/">Introduction
to Web Components</a></li>
</ul>
<h4 id="section-8">2011</h4>
<ul>
<li><a
href="https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell">Web
Components and Model Driven Views by Alex Russell</a></li>
<li><a
href="https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/">What
the Heck is Shadow DOM?</a></li>
</ul>
<h2 id="who-to-follow">Who To Follow</h2>
<table>
<tbody>
<tr>
<td align="center">
<a href="https://twitter.com/polymer">
<img width="80" height="80" src="https://pbs.twimg.com/profile_images/1063502058337136640/RmlG_bbW_80x80.jpg">
<div>
Polymer
</div>
</a>
</td>
<td align="center">
<a href="https://twitter.com/stenciljs">
<img width="80" height="80" src="https://pbs.twimg.com/profile_images/1135534552137510914/5ZzvOFFp_80x80.png">
<div>
Stencil
</div>
</a>
</td>
<td align="center">
<a href="https://twitter.com/openwc">
<img width="80" height="80" src="https://pbs.twimg.com/profile_images/1101188623930662912/YKlBD7n6_80x80.png">
<div>
open-wc.org
</div>
</a>
</td>
<td align="center">
<a href="https://twitter.com/webcomp_dev">
<img width="80" height="80" src="https://pbs.twimg.com/profile_images/1169270943371407360/U-90Bxn0_80x80.jpg">
<div>
webcomponents.dev
</div>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://twitter.com/justinfagnani">
<img width="80" height="80" src="https://pbs.twimg.com/profile_images/378800000808710206/2dbdaa1cb7b0db02f997aea5b40f29b8_80x80.jpeg">
<div>
Justin Fagnani
</div>
</a>
</td>
<td align="center">
<a href="https://twitter.com/viljamis">
<img width="80" height="80" src="https://pbs.twimg.com/profile_images/671595827740086273/wCUWq-1S_80x80.png">
<div>
Viljami Salminen
</div>
</a>
</td>
<td align="center">
<a href="https://twitter.com/JanMiksovsky">
<img width="80" height="80" src="https://pbs.twimg.com/profile_images/675000078055051264/u1ZEQfeE_80x80.jpg">
<div>
Jan Miksovsky
</div>
</a>
</td>
<td align="center">
<a href="https://twitter.com/serhiikulykov">
<img width="80" height="80" src="https://pbs.twimg.com/profile_images/1028197887329685504/cM6nOHlp_80x80.jpg">
<div>
Serhii Kulykov
</div>
</a>
</td>
</tr>
<tbody>
</table>
<h2 id="maintainers">Maintainers</h2>
<ul>
<li>Created by <a href="https://github.com/mateusortiz"><span
class="citation" data-cites="mateusortiz">@mateusortiz</span></a> in
2014.</li>
<li>Maintained by <a href="https://github.com/web-padawan"><span
class="citation" data-cites="web-padawan">@web-padawan</span></a> since
2018.</li>
</ul>
<p><a
href="https://github.com/web-padawan/awesome-web-components">webcomponents.md
Github</a></p>
Reference in New Issue View Git Blame Copy Permalink