Track Webcomponents the Right Way Updates Weekly

A curated list of awesome Web Components resources.

🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 mateusortiz/webcomponents-the-right-way · ⭐ 2.6K · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Feb 26 - Mar 03, 2024

Class Based

• WebCell (⭐175) - Web Components engine based on VDOM, JSX, MobX & TypeScript.

Dec 25 - Dec 31, 2023

Component Libraries

• AnywhereUI (⭐24) - Collection of rich web components that includes framework bindings. Created with StencilJS.

Nov 13 - Nov 19, 2023

Components

• <qr-code> – Web component for rendering customizable, animate-able, SVG-based QR codes.

Component Libraries

• LDRS (⭐1.3k) - Lightweight, customizable loading animations/spinners.

• TrendChart Elements (⭐22) - Components to generate simple, light and responsive charts.

Oct 09 - Oct 15, 2023

Components

• <active-table> - Editable table web component.

• <deep-chat> - Web component for chat with AI capabilities.

Feb 13 - Feb 19, 2023

Design Systems

• Blueprint UI - Web Component based design system with flexible and lightweight components.

Jan 02 - Jan 08, 2023

Introduction

• The Motivation For Using Web Components, an Introduction

• Web Components: From the orbital height

• Why Web Components?

Custom Elements

• Custom elements

• Handling properties in custom element upgrades

Shadow DOM

• A complete guide on shadow DOM and event propagation

• Mind the document.activeElement!

• Shadow DOM

• Shadow DOM and events

• Shadow DOM slots, composition

• Shadow DOM styling

• Who doesn't love some slots?

• Your Content in Shadow DOM Portals

HTML Templates

• Crafting Reusable HTML Templates

• HTML templates with vanilla JavaScript

• Template element

• Templating in HTML

• The HTML5 template element

• Understanding The Template Element In HTML

Codelabs

• HowTo Components –<howto-checkbox>

• HowTo Components –<howto-tabs>

• HowTo Components – <howto-tooltip>

• Lit: basics

• Lit: intermediate

• Lit for React Developers

• Web Components: basics

Interoperability

• Advanced Tooling for Web Components

Class Based

• element-js (⭐18) - Simple and lightweight base classes for web components with a beautiful API.

Meta Frameworks

• Enhance - Web standards-based HTML framework for building lightweight web applications.

• luna-js (⭐5) - SSR framework that makes working with the WebComponents standard a breeze.

• Rocket - Modern web setup for static sites with a sprinkle of JavaScript.

• Web Components Compiler (⭐66) - Compiler to make server-side rendering of native web components easier.

• WebC (⭐1.3k) - Framework-independent standalone HTML serializer for generating markup for web components.

Testing Solutions

• capybara-shadowdom (⭐13) - Ruby gem that adds basic support for the Shadow DOM to Capybara.

• Cypress component tests for Lit - How to run component tests for a Lit web component with Cypress.

• cypress-lit (⭐24) - Test your Lit elements and native web components in Cypress with all the modern browsers.

• Developing Components: Testing - Using @web/test-runner for testing web components in a real browser.

• How To Automate Shadow DOM In Selenium WebDriver - Locating Shadow DOM elements using Selenium WebDriver in a Maven project.

• Native Automation support for Shadow DOM - Shadow DOM and open-source testing frameworks.

• Open Web Components: Testing - Opinionated package that combines and configures testing libraries.

• query-selector-shadow-dom (⭐218) - querySelector that can pierce Shadow DOM roots, useful for automated testing.

• Testing Shadow DOM elements in Selenium - In Selenium 4, there is now a way to access Shadow DOM nodes.

• Test web components with Playwright - So you’ve created a native web component or two. How do you test them in popular browsers?

• W3C Webdriver conquering automation of Shadow DOM - Shadow DOM tree and its interaction with the W3C Webdriver.

Tutorials

• Creating a Custom Element from Scratch

• Encapsulating Style and Structure with Shadow DOM

• Web Components: from zero to hero

• Deep Dive: Web Components & Dependency Injection – The Experiment

• Stencil – Web Components On Steroids

• Using Modern Web Components

• Using Web Components in WordPress is Easier Than You Think

• Web Components 101: Framework Comparison

• Web Components 101: Lit Framework

• Where to begin building Web Components? - The Basics

• Where to begin building Web Components? - Class-based Libraries

Dec 19 - Dec 25, 2022

Components

• <theme-switch> - Animated toggle button to switch between light, dark, and system theme.

Maintainers / 2011

• Created by @mateusortiz in 2014.

• Maintained by @web-padawan since 2018.

Dec 05 - Dec 11, 2022

Introduction

• An Introduction to Web Components

• What are browser-native web components?

Accessibility

• Accessibility with ID Referencing and Shadow DOM

History / 2019

• Web Components for Cross-Framework Component Libraries

• Web Components in 2019: Part 1

• Web Components in 2019: Part 2

• Web Components in 2019: Part 3

• Web Components in 2019: Part 4

• Developments in Web Components I’m excited about in 2019

History / 2018

• Web Components in 2018

History / 2017

• Web Components: Just in the Nick of Time (Polymer Summit 2017)

• Using Web Components in Ionic (Polymer Summit 2017)

• Web Components for VR (Polymer Summit 2017)

• Building UI at Enterprise Scale with Web Components (Polymer Summit 2017)

• Custom Elements Everywhere (Polymer Summit 2017)

• Evolving the Next Generation of Polymer Elements (Polymer Summit 2017)

• Polymer @ YouTube (Polymer Summit 2017)

• Web Components for CMS (Polymer Summit 2017)

• Web Components v1 - the next generation

History / 2016

• Extensible web components

• Web Component Challenges

• Web Components and progressive enhancement

• Update on standardizing Shadow DOM and Custom Elements

History / 2015

• There is an Element for that

• What happened to Web Components?

• Why Web Components will make the web a better place for our users

• Practical Questions around Web Components

History / 2014

• A No-Nonsense Guide to Web Components, Part 1: The Specs

• A No-Nonsense Guide to Web Components, Part 2: Practical Use

• Web Components + Backbone: A Game-Changing Combination

• Server-less applications powered by Web Components

• Web Components and the Future of CSS

• Easy composition and reuse with Web Components

• Let’s build some apps with Polymer!

• Polymer: State of the Union

• Web Components 101: An Introduction to Fundamental Changes in HTML

• Web Components 201: Designing Web Components for Reuse

• Why Web Components — Does the Web Really Need Another Component?

• “Don’t stop thinking about tomorrow” - AngularJS and Web Components

• Multi-device Apps with Web Components

• As I Walk Through The Valley Of The Shadow Of DOM

• Accessibility of Web Components

• Componentize The Web: Back To The Browser!

• Google I/O 2014 - Polymer and the Web Components revolution

• Google I/O 2014 - Polymer and Web Components change everything you know about Web development

• Google I/O 2014 - Unlock the next era of UI development with Polymer

• Making Polymer Elements Accessible

• The Road to Web Components

• The Web Components Revolution is Here

• Web Components: A chance to create the future

• Web Component Mashups at 3 a.m.

• Web Components Tools & Libraries

• Web Components Can Do That?!

• HTML as Custom Elements (⭐260)

• Using Polymer to Create Web Components

History / 2013

• A future called Web Components

• Building Mobile Web Applications With Brick

• Polymer: declarative, encapsulated, and reusable components for the web

• Web Components: Why you're already an expert

• Yo Polymer: a new way of building web apps

• Web Components Revolution

• Return of Inspector Web: Web Components a Year Later

• Working with Custom Elements

• Breaking Development: Web Components

• Web Components: A Tectonic Shift for Web Development - Google I/O 2013

• Web Components: Getting Started

• Shadow DOM 101

• Shadow DOM 201

• Shadow DOM 301

• Visualizing shadow DOM concepts

• Web components and the future of web development

• HTML's New Template Tag

History / 2012

• Google I/O 2012 - The Web Platform's Cutting Edge

Nov 07 - Nov 13, 2022

Design Systems

• Astro Space UX Design System (⭐81) - Set of components to build rich space app experiences with established interaction patterns.

• Auro Design System - Alaska Airlines design system to innovate on ideas and collaborate on the future.

• FAST Components (⭐8.9k) - Library of Web Components based on the FAST design language.

• Nord - Nordhealth’s design system for products, digital experiences and brand.

• U-M Library Design System - University of Michigan Library Design System.

History / 2018

• 6 Reasons You Should Use Native Web Components

• Extending Native DOM Elements with Web Components

History / 2016

• What's New in Shadow DOM v1 (by examples)

• Why web components are so important

History / 2014

• Why Web Components Are Ready For Production

• An Addendum to Why Web Components Aren't Ready for Production Yet

• Why Web Components Aren't Ready for Production... Yet

• Component Interop With React And Custom Elements

Oct 31 - Nov 06, 2022

Custom Elements

• Custom Elements v1: Reusable Web Components

Shadow DOM

• Shadow DOM v1: Self-Contained Web Components

Accessibility

• Dialogs and shadow DOM: can we make it accessible?

• Managing focus in the shadow DOM

Best Practices

• Custom Element Best Practices

Codelabs

• Creating Custom Form Controls with ElementInternals

Examples

• Nude UI (⭐204) - Collection of accessible, customizable, ultra-light web components.

Styling

• Does shadow DOM improve style performance?

• Eschewing Shadow DOM

• How Nordhealth uses Custom Properties in Web Components

• Style scoping versus shadow DOM: which is fastest?

• Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think

Component Libraries

• AXA Pattern Library (⭐120) - AXA CH UI components library built with Web Components.

• Curvenote (⭐168) - Web components for creating interactive scientific articles.

• Dile Components (⭐65) - General use Web Components for websites and applications.

• Furo Webcomponents (⭐12) - Enterprise ready set of web components which work best with Eclipse Furo.

• Fusion Web Components (⭐9) - Ser of web components used by Equinor Fusion.

• Ignite UI Web Components (⭐104) - Complete library of UI components from Infragistics.

• Medblocks UI (⭐46) - Web Components for rapid development of openEHR and FHIR systems.

• Mutation testing elements (⭐26) - A schema for mutation testing results with the web components to visualize it.

• One Platform Components (⭐28) - Set of web components for Red Hat One Platform.

• Playground Elements (⭐473) - Serverless code experiences with web components.

• Stripe Elements (⭐78) - Custom Element Wrapper for Stripe.js v3 Elements.

• Titanium Elements (⭐15) - Collection of lightweight web components used by Leavitt Group Enterprises.

• Umbraco UI Components (⭐96) - Collection of user interface web components for Umbraco CMS.

• VSCode Webview Elements (⭐0) - Components for creating VSCode extensions which use the Webview API.

• Webmarkets web components (⭐1) - Set of Webmarkets' public web components.

Design Systems

• Carbon Web Components (⭐464) - Carbon Design System variant on top of Web Components.

• Clarity Core Web Components (⭐147) - Suite of web components from the Clarity Design System.

• Forge Components (⭐22) - Library of Web Components adhering to the Forge Design System.

• Liquid (⭐60) - UI component library based on the Liquid Design System.

• Material Web Components (⭐8.3k) - Material Design implemented as Web Components.

• Momentum UI Web Components (⭐183) - Set of UI components based on Momentum Design.

• OutlineJS (⭐120) - Web component based design system starter kit.

• Pharos Design System (⭐104) - JSTOR's design system to create cohesive, supportive, and beautiful experiences.

• Red Hat Design System (⭐70) - Web components for building uniform experiences with the Red Hat brand.

• Siemens iX Web Components (⭐141) - Web Components implementing Siemens iX design system.

Class Based

• Forge Core (⭐3) - Building blocks and utilities that are used when building Forge Web Components.

• Joist (⭐106) - Set of small libraries designed to add the bare minimum to web components to make you productive.

• Lit - Simple library for building fast, lightweight web components.

Functional

• Solid Element (⭐31k) - Library that extends Solid adding Custom Web Components and extensions.

Integrations

• nuxt-custom-elements (⭐73) - Export your project components as custom elements for integration into external pages.

React

• 3 Approaches to Integrate React with Custom Elements

• Building Interoperable Web Components That Even Work With React

• Using Web Components With Next (or Any SSR Framework)

Sep 27 - Oct 03, 2021

Tools

• Backlight — With collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems.

Jun 21 - Jun 27, 2021

Accessibility

• Web Components punch list

Examples

• open-wc code examples - Collection of best practices and design patterns for developing web components.

May 17 - May 23, 2021

Introduction

• Web Components 101

May 10 - May 16, 2021

Case Studies

• Get moving with Microsoft’s FAST web components

May 03 - May 09, 2021

Case Studies

• How we use Web Components at GitHub

• Using web components to encapsulate CSS and resolve design system conflicts

Component Libraries

• github-elements (⭐2.6k) - GitHub's Web Component collection.

• Vaadin components (⭐383) - Evolving set of high-quality web components for building business web applications.

Feb 22 - Feb 28, 2021

Case Studies

• How Web Components Are Used at GitHub and Salesforce

Jan 04 - Jan 10, 2021

Custom Elements

• Handy Custom Elements' Patterns

Codelabs

• From Web Component to Lit Element

Styling

• Options for styling web components

Nov 23 - Nov 29, 2020

Podcasts

• Real Talk JavaScript, episode 101: Back to Basics with Native HTML and LitElement

Nov 16 - Nov 22, 2020

Best Practices

• Developing Components: Publishing

Starter Kits

• Create Open Web Components - Web component project scaffolding.

Tutorials

• Getting started with LitElement and TypeScript

• Navigation Lifecycle using Vaadin Router, LitElement and TypeScript

• Routing Management with LitElement and TypeScript

• Web Components Tools: A Comparison

Oct 19 - Oct 25, 2020

Tools

• webcomponents.dev - Component IDE for web platform developers.

Oct 05 - Oct 11, 2020

Components

• <player-x> - Media player web component.

• <vime-player> - Customizable, extensible, accessible and framework agnostic media player.

Sep 14 - Sep 20, 2020

Component Libraries

• Joomla UI custom elements (⭐32) - Compilation of Joomla 4 Custom Elements.

Sep 07 - Sep 13, 2020

Shadow DOM

• Understanding Slot Updates with Web Components

Case Studies

• Web Components at GitHub - Web Components SF Meetup

Components

• <fg-modal> - Accessible modal dialog web component.

Design Systems

• Fluent UI Web Components (⭐17k) - Library of Web Components that supports Microsoft's Fluent design language.

Use Cases

• How searching for a bundle-free React led me to web components

Aug 31 - Sep 06, 2020

Case Studies

• Web Development At Scale: Composable Applications With Web Components

Components

• <api-viewer> - API documentation and live playground for Web Components.

• <chess-board> - Standalone chess board web component.

• <css-doodle> - Web component for drawing patterns with CSS.

• <dark-mode-toggle> - Custom element that allows to create a dark mode toggle or switch.

• <emoji-picker> - Lightweight emoji picker, distributed as a web component.

• <file-viewer> - Web component built with Svelte to view files.

• <json-viewer> - Web component to visualize JSON data in a tree view.

• <lite-youtube> - Lite YouTube embed with a focus on visual performance.

• <midi-player> - MIDI file player and visualizer web components.

• <model-viewer> - Web component for rendering interactive 3D models.

• <progressive-image> - Custom element to progressively enhance image placeholders.

• <range-slider> - Accessible range slider custom element with keyboard support.

• <rapi-doc> - Web component for creating documentation from OpenAPI Specification.

• <shader-doodle> - Web component for writing and rendering shaders.

• <trix-editor> - Rich text editor custom element for everyday writing.

• <web-vitals> - Bring web vitals (⭐7k) quickly into your page using custom elements.

Component Libraries

• Warp View (⭐8) - Collection of charting web components for Warp 10.

Design Systems

• Lyne Components (⭐31) - Building blocks of the Lyne Design System are based on Web Components.

Class Based

• Panel (⭐270) - Web Components + Virtual DOM: web standards for powerful UIs.

Tutorials

• Creating a Reusable Avatar Web Component

Aug 24 - Aug 30, 2020

Component Libraries

• Smart Web Components (⭐411) - Web components for business applications.

Tools

• Custom Elements Locator (⭐38) - Chrome extension to find custom elements on a page.

• @storybook/web-components - UI development environment for plain web-component snippets.

Jul 20 - Jul 26, 2020

Component Libraries

• Shoelace (⭐12k) - A forward-thinking library of web components.

Class Based

• FAST Element (⭐8.9k) - Lightweight library for building performant, memory-efficient, standards-compliant Web Components.

Integrations

• reactify-wc (⭐170) - Use web components with React properties and functions.

Jul 13 - Jul 19, 2020

Component Libraries

• Immersive Custom Elements (⭐134) - Set of web components for embedding immersive (VR & AR) content.

• Ketch.UP (⭐9) - Web components library for Sme.UP.

• Open Business Application Platform Web Components (⭐12) - Collection of web components designed for business applications.

Design Systems

• GOV.UK Web Components (⭐4) - Set of encapsulated web components consuming the GOV.UK Design System.

Integrations

• @adobe/react-webcomponent (⭐103) - Automate the wrapping of a React component in a custom element.

Angular

• Building and consuming Angular Elements as Web Components

Tools

• Web Components Codemods (⭐6) - Codemods for Web Components.

History / 2013

• Performance and Custom Elements

• Creating Reusable Markup with The HTML Template Element

• Working with Shadow DOM

Jul 06 - Jul 12, 2020

Component Libraries

• Pixano Elements (⭐35) - Re-usable web components dedicated to data annotation tasks.

Presentations

• Shadow DOM: off the beaten track by @serhiikulykov

Jun 22 - Jun 28, 2020

Limitations

• Beyond the polyfills: how Web Components affect us today?

• Custom elements, shadow DOM and implicit form submission

• Form-associated custom elements

• You might not need shadow DOM

Styling

• Styling a Web Component

• Styling in the Shadow DOM With CSS Shadow Parts

• Thinking Through Styling Options for Web Components

• Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements

Component Libraries

• XWeather (⭐6) - Collection of web components implementing portions of the OpenWeatherMap API.

History / 2017

• Styling is critical to web component reuse, but may prove difficult in practice

Jun 15 - Jun 21, 2020

Component Libraries

• Blaze UI Atoms (⭐1.5k) - Set of web components powered by Blaze CSS.

Benchmarks

• All the Ways to Make a Web Component

Testing Solutions

• shadow-automation-selenium (⭐97) - Shadow DOM automation using Selenium.

History / 2012

• The Basics of the Shadow DOM

Jun 08 - Jun 14, 2020

Architecture

• A deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontends

• Generating Config driven Dynamic Forms using Web Components

Component Libraries

• Nightingale (⭐111) - Data visualisation web components for the life sciences.

• TEI Publisher Components (⭐18) - Collection of web components used by TEI Publisher and apps generated by it.

Integrations

• ember-custom-elements (⭐15) - Render Ember and Glimmer components using custom elements.

• react-shadow (⭐1.3k) - Utilise Shadow DOM in React with all the benefits of style encapsulation.

Angular

• How to use Angular ngModel and ngForms with WebComponents

Svelte

• Svelte Custom Element API

Podcasts

• Code[ish], episode 38: Building with Web Components

Presentations

• Web Components: Introduction and State of the Art by @webcomp_dev

Talks

• Custom Web Shadow Elements, or Whatever… by @aerotwist

Jun 01 - Jun 07, 2020

Accessibility

• Accessibility for Web Components

• How to Make Accessible Web Components — a Brief Guide

• The future of accessibility for custom elements

• The Guide to Accessible Web Components

• Web Components and the Accessibility Object model (AOM)

• Web components still need to be accessible

Examples

• generic-components (⭐548) - Collection of generic web components with a focus on accessibility, and ease of use.

• howto-components (⭐860) - Collection of web components that implement common web UI patterns.

• vanilla-retro-js (⭐14) - Vanilla JS UI component library of HTML deprecated tags.

• web-components-examples (⭐2.9k) - Series of web components examples, related to the MDN web components documentation.

Architecture

• Frankenstein Migration: Framework-Agnostic Approach (Part 1)

• Frankenstein Migration: Framework-Agnostic Approach (Part 2)

• Hiding internal framework methods and properties from web component APIs

• How to deliver Custom Elements

• Making Web Components for Different Contexts

• Supporting both automatic and manual registration of custom elements

• Web Components — the right way

Case Studies

• Looking back on five years of web components

Component Libraries

• Apollo Elements (⭐413) - Custom elements for using Apollo GraphQL with various web components libraries.

• Blackstone UI (⭐76) - Web components for creating interfaces by Blackstone Publishing.

• elements-sk (⭐29) - Collection of custom elements for "a la carte" web development.

• Lume (⭐1.2k) - Custom elements for defining 2D or 3D scenes rendered with CSS3D or WebGL.

Design Systems

• Bolt Design System (⭐288) - Twig and Web Component-powered UI components, reusable visual styles and tooling.

• Crayons (⭐189) - Collection of web components that adheres to the Freshworks Design System.

Starter Kits

• custom-element-boilerplate (⭐157) - Boilerplate for creating a custom element.

• hello-web-components (⭐25) - Simple starter hello world web component written in TypeScript.

• nutmeg (⭐115) - Build, test, and publish vanilla Web Components with a little spice.

Podcasts

• Labs Talk - Web Components with Peter Muessig

Talks

• Better Apps: Delivering Universal UI Patterns as Web Components by @janmiksovsky

• Styling and Theming Web Components by @justinfagnani

• Web Components at Enterprise Scale by @diervo

May 25 - May 31, 2020

CSS Shadow Parts

• ::part and ::theme, an ::explainer

Interoperability

• Web Components aren't a framework replacement - they're better than that

Case Studies

• Implementing a Design Language System with Stencil.js

Meta Frameworks

• AMP (⭐15k) - Web component framework to easily create user-first experiences for the web.

Component Libraries

• Brightspace UI core (⭐51) - Collection of web components for building Brightspace applications.

• Clever components (⭐198) - Collection of Web Components made by Clever Cloud.

• DataFormsJS (⭐177) - Standalone Components for SPA routing, displaying data from web services, and more.

• Elix (⭐800) - High-quality, customizable web components for common user interface patterns.

• Lion Web Components (⭐1.7k) - Set of highly performant, accessible and flexible Web Components.

• LRNWebComponents (⭐235) - ELMS:LN produced web components for any project.

• Microsoft Graph Toolkit (⭐880) - Collection of web components for the Microsoft Graph.

• Nuxeo Elements (⭐27) - Components for building web applications with Nuxeo using Web Components.

• Tradeshift Elements (⭐14) - Reusable Tradeshift UI Components as Web Components.

• Wired Elements (⭐9.6k) - Set of common UI elements with a hand-drawn, sketchy look.

• Wokwi Elements (⭐154) - Web Components for Arduino and various electronic parts.

Design Systems

• Calcite Components (⭐252) - Shared Web Components for Esri's Calcite design framework.

• Helix UI (⭐56) - Web Component library for the Helix Design System.

• NuML | NUDE Elements (⭐336) - HTML Framework and Design System based on Web Components and runtime CSS generation.

• PatternFly Elements (⭐370) - Collection of flexible and lightweight Web Components based on the Unified Design Kit.

• Spectrum Web Components (⭐1.1k) - Adobe Spectrum design language implementation built with Web Components.

• UI5 Web Components (⭐1.4k) - Set of reusable UI elements implementing SAP Fiori Design Guidelines.

• Zooplus web components (⭐45) - Set of web components that implement Z+ shop style guide.

Class Based

• DNA (⭐37) - Progressive Web Components library.

• Tonic (⭐837) - Minimalist, stable, audit friendly component framework.

Integrations

• preact-custom-element (⭐336) - Generate/register a custom element from a preact component.

Benchmarks

• web-components-benchmark - Benchmark Web Components technologies with various examples.

• web-components-todo - The same todo application built in different Web Components libraries for benchmark purpose.

Tutorials

• Handling data with Web Components

• How to use D3js with WebComponents

Presentations

• Are Web Components the Betamax of web development? by @lostinbrittany

• Designing Standard Systems by @stefsull and @bferrua

• Frontend Architecture for Scalable Design Systems by @salem_cobalt

• lit-apollo: Data-Driven Components that Use the Platform by @PowersBenny

• Mastering Shadow DOM by @Martine_Dowden

• Modernizing Large Frontends with Web Components by @samjulien

• Using Web Components to Build a Framework-agnostic UI Library by @brianbouril and @danciupuliga

• Web Components and the AOM by @LeonieWatson

• Web Components and Styles Scoping by @bashmish

• Web Components can do that?! by @vogloblinsky

May 18 - May 24, 2020

Codelabs

• Building Custom Elements with Web Components for the 2020 Elections

Use Cases

• How we chose to build our Design System using StencilJS Web Components

• Reasons Web Components are perfect for a big company

• 5 Reasons Web Components Are Perfect for Design Systems

• Web components: the secret ingredient helping power the web

• Web Components for Enterprise. Part 1: Salesforce, Oracle, SAP

• Web Components for Enterprise. Part 2: Nuxeo, Ionic, Vaadin

• Why I use Web Components - My use cases

• Why we use Web Components by @viljamis

• Why we use Web Components by @maxlynch

React

• Rendering React Components With Custom Elements

Tutorials

• Building Web Components with Vanilla JavaScript

• Creating Web Components with Stencil

• Recreating The Arduino Pushbutton Using SVG And <lit-element>

• Snake-Eating Game Making with Web Components of Omi and MVP Architecture

History / 2018

• Styling Accessibility: A Web Components Approach

May 11 - May 17, 2020

Introduction

• Intro to Web Components

Custom Elements

• MDN - Using Custom Elements

Shadow DOM

• MDN - Using Shadow DOM

HTML Templates

• MDN - <template>: The Content Template element

• MDN - Using templates and slots

CSS Shadow Parts

• MDN - ::part() CSS pseudo element

• MDN - part global attribute

Best Practices

• How to Publish Web Components to NPM

Codelabs

• Build a Story Web Component with LitElement

Case Studies

• Apple Just Shipped Web Components to Production and You Probably Missed It

Svelte

• How to Create a Web Component in Svelte

• Svelte Web Component — 5.4KB

History / 2019

• A history of the HTML slot element

History / 2017

• An intro to web components with otters

History / 2014

• Building an Accessible Disclosure Button – using Web Components

May 04 - May 10, 2020

Introduction

• The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM

• The Power of Web Components

Custom Elements

• A Guide to Custom Elements for React Developers

• All about HTML Custom Elements (⭐199)

• HTML Living Standard: Custom elements

• web-platform-tests (⭐4.6k)

Shadow DOM

• DOM Living Standard: Shadow tree

• Open vs. Closed Shadow DOM

• Shadow DOM in depth (⭐228)

• The Rise of Shadow DOM

• What is the Shadow DOM?

• web-platform-tests (⭐4.6k)

HTML Templates

• HTML Living Standard: The template element

• web-platform-tests (⭐4.6k)

CSS Shadow Parts

• W3C First Public Working Draft

• CSS Shadow Parts are coming!

• web-platform-tests (⭐4.6k)

Interoperability

• Custom Elements Everywhere

Case Studies

• Bringing Order to Web Design Chaos (with Web Components)

• The Firefox UI is now built with Web Components

• web.dev engineering blog #1: How we build the site and use Web Components

React

• How to use Web Components in React

Usage Metrics

• Chrome Platform Status: CustomElementRegistryDefine

• Chrome Platform Status: ElementAttachShadow

• Chrome Platform Status: HTMLTemplateElement

Form-associated Custom Elements

• Form Participation API Explained - Document by Google Chrome team.

• Form-associated custom elements - Feature in Chrome platform status.

• web-platform-tests (⭐4.6k)

Constructable Stylesheet Objects

• Specification Draft

• web-platform-tests (⭐4.6k)

• Explainer (⭐138)

• Constructable Stylesheets - Feature in Chrome platform status.

Custom State Pseudo Class

• Blink: Intent to implement

• ElementInternals's states property and the :state() pseudo class

Polyfills / Custom Elements polyfills

• @webcomponents/custom-elements (⭐1.1k) - Custom Elements polyfill by Polymer team.

• document-register-element (⭐1.1k) - Custom Elements polyfill by Andrea Giammarchi.

Polyfills / Customized Built-in Elements polyfills

• @corpuscule/custom-builtin-elements (⭐12) - Customized built-in elements polyfill by CorpusculeJS.

• @ungap/custom-elements-builtin (⭐104) - Customized built-in elements polyfill by ungap project.

Polyfills / Shadow DOM shims

• @webcomponents/shadydom (⭐1.1k) - ShadowDOM v1 shim.

• @webcomponents/shadycss (⭐1.1k) - ShadowDOM style encapsulation shim.

• @lwc/synthetic-shadow (⭐1.5k) - Shadow DOM polyfill by LWC.

Polyfills / HTML Templates polyfills

• @webcomponents/template (⭐1.1k) - Minimal polyfill for <template>.

• @ungap/import-node (⭐7) - An importNode polyfill for IE11 by ungap project.

Apr 27 - May 03, 2020

Case Studies

• Shipping Web Components in 2020

History / 2016

• The Case for Custom Elements: Part 1

• The Case for Custom Elements: Part 2

Apr 20 - Apr 26, 2020

Case Studies

• ING Open-Sources Lion, Its White-Label Web Component Library – Q&A with Thomas Allmer

• Web Components at Scale at Salesforce: Challenges Encountered, Lessons Learnt

Class Based

• Stencil (⭐12k) - Compiler for generating Web Components.

Angular

• Using Web Components in Angular

Vue

• Using Web Components in Vue

History / 2018

• Web Components 101: An Introduction to Web Components

• Web Components Introduction: Creating Custom HTML Elements in 2018

History / 2016

• Introducing Custom Elements

History / 2015

• Introducing Slot-Based Shadow DOM API

History / 2014

• The Shadow DOM Diaries

• A Detailed Introduction To Custom Elements

Sep 30 - Oct 06, 2019

Integrations

• @riotjs/custom-elements (⭐34) - Simple API to create vanilla custom elements with Riot.js.

Aug 19 - Aug 25, 2019

Interoperability

• Custom Elements That Work Anywhere

• JavaScript frameworks, meet Web Components

• Web Components: Seamlessly interoperable

Aug 05 - Aug 11, 2019

Podcasts

• Frontend Happy Hour, episode 62: Web Components - shots of shadow DOM

• Real Talk JavaScript, episode 7: Custom Web Components with Rob Wormald

Jul 22 - Jul 28, 2019

Tools

• web-component-analyzer (⭐490) - CLI that analyzes web components and emits documentation / diagnostics.

Jul 15 - Jul 21, 2019

Miscellaneous

• Vaadin Directory - Publish, discuss and rate web components

Jul 01 - Jul 07, 2019

Functional

• atomico (⭐1.1k) - Small library for the creation of interfaces based on web components using functions and hooks.

• haunted (⭐2.6k) - React's Hooks API implemented for web components.

Jun 17 - Jun 23, 2019

Miscellaneous

• bruck (⭐512) - Prototyping system built with web components and the Houdini Paint API.

• webcomponents.org - Discuss & share web components.

Jun 10 - Jun 16, 2019

Class Based

• Lightning Web Components (⭐1.5k) - blazing fast, enterprise-grade Web Components foundation.

May 27 - Jun 02, 2019

Angular

• Web Components With Angular Ivy In 6 Steps

Apr 22 - Apr 28, 2019

History / 2011

• Web Components and Model Driven Views by Alex Russell

Mar 25 - Mar 31, 2019

Integrations

• remount (⭐675) - Mount React components to the DOM using custom elements.

Mar 18 - Mar 24, 2019

Case Studies

• ING ❤ Web Components

Jan 07 - Jan 13, 2019

Functional

• hybrids (⭐2.9k) - UI library for creating Web Components with simple and functional API.

Dec 17 - Dec 23, 2018

Case Studies

• Lessons Learned, making our app with Web Components

Books

• Web Components in Action - Book by Ben Farrell, available at Manning early release program.

• Web Component Essentials - Book by Cory Rylan, early preview edition available at Leanpub.

Dec 10 - Dec 16, 2018

Best Practices

• Gold Standard Checklist for Web Components (⭐1k)

• Guidelines for creating web platform compatible components

• Open Web Components Recommendations

Class Based

• Omi (⭐13k) - Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).

Dec 03 - Dec 09, 2018

Angular

• Angular Elements Overview

History / 2018

• Get started with Vue web components

History / 2015

• Microsoft Edge and Web Components

• Bringing componentization to the web: An overview of Web Components

History / 2014

• Mozilla and Web Components: Update

History / 2011

• What the Heck is Shadow DOM?

Nov 26 - Dec 02, 2018

Class Based

• slim.js (⭐996) - Fast & Robust Front-End Micro-framework based on modern standards.

History / 2018

• Create & Publish Web Components With Vue CLI 3

History / 2017

• Web Components: The Long Game

• The broken promise of Web Components

• Regarding the broken promise of Web Components

History / 2016

• Demythstifying Web Components

• Understanding Web Components

History / 2015

• Web Components and their role in the future of web development

• The state of Web Components

History / 2014

• The State of the Componentised Web

• Web Components and you – dangers to avoid

• The Web's Declarative, Composable Future

History / 2013

• A Guide to Web Components

History / 2012

• Notes on Web Components + ARIA

• Introduction to Web Components