awesome-web-components

Web component guide

A curated collection of resources and guides for building and using reusable custom web components

A curated list of awesome Web Components resources.

GitHub

3k stars
117 watching
156 forks
last commit: over 2 years ago
Linked from 7 awesome lists

awesomeawesome-listcustom-elementsshadow-domweb-componentswebcomponents

Awesome Web Components / Introduction

An Introduction to Web Components
Intro to Web Components
The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM
The Motivation For Using Web Components, an Introduction
The Power of Web Components
Web Components 101
Web Components: From the orbital height
What are browser-native web components?
Why Web Components?

Awesome Web Components / Standards / Custom Elements

A Guide to Custom Elements for React Developers
All about HTML Custom Elements201over 7 years ago
Custom elements
Custom Elements v1: Reusable Web Components
Handling properties in custom element upgrades
Handy Custom Elements' Patterns
HTML Living Standard: Custom elements
MDN - Using Custom Elements
web-platform-tests5,053almost 2 years ago

Awesome Web Components / Standards / Shadow DOM

A complete guide on shadow DOM and event propagation
DOM Living Standard: Shadow tree
MDN - Using Shadow DOM
Mind the document.activeElement!
Open vs. Closed Shadow DOM
Shadow DOM
Shadow DOM and events
Shadow DOM in depth232over 4 years ago
Shadow DOM slots, composition
Shadow DOM styling
Shadow DOM v1: Self-Contained Web Components
The Rise of Shadow DOM
Understanding Slot Updates with Web Components
What is the Shadow DOM?
Who doesn't love some slots?
Your Content in Shadow DOM Portals
web-platform-tests5,053almost 2 years ago

Awesome Web Components / Standards / HTML Templates

Crafting Reusable HTML Templates
HTML Living Standard: The template element
HTML templates with vanilla JavaScript
MDN - <template>: The Content Template element
MDN - Using templates and slots
Template element
Templating in HTML
The HTML5 template element
Understanding The Template Element In HTML
web-platform-tests5,053almost 2 years ago

Awesome Web Components / Standards / CSS Shadow Parts

W3C First Public Working Draft
CSS Shadow Parts are coming!
MDN - ::part() CSS pseudo element
MDN - part global attribute
::part and ::theme, an ::explainer
web-platform-tests5,053almost 2 years ago

Awesome Web Components / Guides / Accessibility

Accessibility for Web Components
Accessibility with ID Referencing and Shadow DOM
Dialogs and shadow DOM: can we make it accessible?
How to Make Accessible Web Components — a Brief Guide
Managing focus in the shadow DOM
The future of accessibility for custom elements
The Guide to Accessible Web Components
Web Components and the Accessibility Object model (AOM)
Web Components punch list
Web components still need to be accessible

Awesome Web Components / Guides / Best Practices

Custom Element Best Practices
Developing Components: Publishing
Gold Standard Checklist for Web Components1,030about 11 years ago
Guidelines for creating web platform compatible components
How to Publish Web Components to NPM
Open Web Components Recommendations

Awesome Web Components / Guides / Codelabs

Build a Story Web Component with LitElement
Building Custom Elements with Web Components for the 2020 Elections
Creating Custom Form Controls with ElementInternals
From Web Component to Lit Element
HowTo Components –<howto-checkbox>
HowTo Components –<howto-tabs>
HowTo Components – <howto-tooltip>
Lit: basics
Lit: intermediate
Lit for React Developers
Web Components: basics

Awesome Web Components / Guides / Examples

generic-components561about 4 years agoCollection of generic web components with a focus on accessibility, and ease of use
howto-components868about 2 years agoCollection of web components that implement common web UI patterns
Nude UI223almost 2 years agoCollection of accessible, customizable, ultra-light web components
open-wc code examplesCollection of best practices and design patterns for developing web components
vanilla-retro-js16almost 4 years agoVanilla JS UI component library of HTML deprecated tags
web-components-examples3,152almost 2 years agoSeries of web components examples, related to the MDN web components documentation

Awesome Web Components / Articles / Architecture

A deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontends
Frankenstein Migration: Framework-Agnostic Approach (Part 1)
Frankenstein Migration: Framework-Agnostic Approach (Part 2)
Generating Config driven Dynamic Forms using Web Components
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

Awesome Web Components / Articles / Interoperability

Advanced Tooling for Web Components
Custom Elements Everywhere
Custom Elements That Work Anywhere
JavaScript frameworks, meet Web Components
Web Components aren't a framework replacement - they're better than that
Web Components: Seamlessly interoperable

Awesome Web Components / Articles / 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

Awesome Web Components / Articles / Styling

Does shadow DOM improve style performance?
Eschewing Shadow DOM
How Nordhealth uses Custom Properties in Web Components
Options for styling web components
Style scoping versus shadow DOM: which is fastest?
Styling a Web Component
Styling in the Shadow DOM With CSS Shadow Parts
Thinking Through Styling Options for Web Components
Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think
Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements

Awesome Web Components / Real World / Case Studies

Apple Just Shipped Web Components to Production and You Probably Missed It
Bringing Order to Web Design Chaos (with Web Components)
Get moving with Microsoft’s FAST web components
How Web Components Are Used at GitHub and Salesforce
How we use Web Components at GitHub
Implementing a Design Language System with Stencil.js
ING ❤ Web Components
ING Open-Sources Lion, Its White-Label Web Component Library – Q&A with Thomas Allmer
Lessons Learned, making our app with Web Components
Looking back on five years of web components
Shipping Web Components in 2020
The Firefox UI is now built with Web Components
Using web components to encapsulate CSS and resolve design system conflicts
Web Components at GitHub - Web Components SF Meetup
Web Components at Scale at Salesforce: Challenges Encountered, Lessons Learnt
Web Development At Scale: Composable Applications With Web Components
web.dev engineering blog #1: How we build the site and use Web Components

Awesome Web Components / Real World / Components

<active-table>231over 2 years agoEditable table web component
<api-viewer>271almost 2 years agoAPI documentation and live playground for Web Components
<chess-board>105about 2 years agoStandalone chess board web component
<css-doodle>5,682almost 2 years agoWeb component for drawing patterns with CSS
<dark-mode-toggle>1,178almost 2 years agoCustom element that allows to create a dark mode toggle or switch
<deep-chat>1,596almost 2 years agoWeb component for chat with AI capabilities
<emoji-picker>1,516almost 2 years agoLightweight emoji picker, distributed as a web component
<fg-modal>72almost 4 years agoAccessible modal dialog web component
<file-viewer>37over 2 years agoWeb component built with Svelte to view files
<json-viewer>179almost 2 years agoWeb component to visualize JSON data in a tree view
<lite-youtube>5,950almost 2 years agoLite YouTube embed with a focus on visual performance
<midi-player>696over 2 years agoMIDI file player and visualizer web components
<model-viewer>7,060almost 2 years agoWeb component for rendering interactive 3D models
<player-x>107about 2 years agoMedia player web component
<progressive-image>265over 2 years agoCustom element to progressively enhance image placeholders
<qr-code>1,299over 3 years ago– Web component for rendering customizable, animate-able, SVG-based QR codes
<range-slider>63about 2 years agoAccessible range slider custom element with keyboard support
<rapi-doc>1,724almost 2 years agoWeb component for creating documentation from OpenAPI Specification
<shader-doodle>545over 3 years agoWeb component for writing and rendering shaders
<theme-switch>15over 2 years agoAnimated toggle button to switch between light, dark, and system theme
<trix-editor>19,172almost 2 years agoRich text editor custom element for everyday writing
<vime-player>2,787almost 2 years agoCustomizable, extensible, accessible and framework agnostic media player
<web-vitals>183about 3 years agoBring quickly into your page using custom elements

Awesome Web Components / Real World / Component Libraries

AMP14,892almost 2 years agoWeb component framework for easily creating user-first websites, stories, ads, emails and more
AnywhereUI30over 2 years agoCollection of rich web components that includes framework bindings. Created with StencilJS
Apollo Elements416over 2 years agoCustom elements for using Apollo GraphQL with various web components libraries
AXA Pattern Library125almost 3 years agoAXA CH UI components library built with Web Components
Blackstone UI91almost 2 years agoWeb components for creating interfaces by Blackstone Publishing
Blaze UI Atoms1,557about 3 years agoSet of web components powered by Blaze CSS
Brightspace UI core66almost 2 years agoCollection of web components for building Brightspace applications
Clever components222almost 2 years agoCollection of Web Components made by Clever Cloud
Curvenote182over 3 years agoWeb components for creating interactive scientific articles
DataFormsJS191about 2 years agoStandalone Components for SPA routing, displaying data from web services, and more
Dile Components83almost 2 years agoGeneral use Web Components for websites and applications
elements-sk29over 3 years agoCollection of custom elements for "a la carte" web development
github-elements2,811almost 3 years agoGitHub's Web Component collection
Elix827over 3 years agoHigh-quality, customizable web components for common user interface patterns
Furo Webcomponents12almost 2 years agoEnterprise ready set of web components which work best with Eclipse Furo
Fusion Web Components12almost 2 years agoSer of web components used by Equinor Fusion
Ignite UI Web Components121almost 2 years agoComplete library of UI components from Infragistics
Immersive Custom Elements134almost 7 years agoSet of web components for embedding immersive (VR & AR) content
Joomla UI custom elements32almost 2 years agoCompilation of Joomla 4 Custom Elements
Ketch.UP11almost 2 years agoWeb components library for Sme.UP
LDRS1,792almost 2 years agoLightweight, customizable loading animations/spinners
Lion Web Components1,777almost 2 years agoSet of highly performant, accessible and flexible Web Components
LRNWebComponents246almost 2 years agoELMS:LN produced web components for any project
Lume1,357almost 2 years agoCustom elements for defining 2D or 3D scenes rendered with CSS3D or WebGL
Medblocks UI54almost 2 years agoWeb Components for rapid development of openEHR and FHIR systems
Microsoft Graph Toolkit966almost 2 years agoCollection of web components for the Microsoft Graph
Mutation testing elements28almost 2 years agoA schema for mutation testing results with the web components to visualize it
Nightingale124almost 2 years agoData visualisation web components for the life sciences
Nuxeo Elements27almost 2 years agoComponents for building web applications with Nuxeo using Web Components
One Platform Components30almost 2 years agoSet of web components for Red Hat One Platform
Open Business Application Platform Web Components12over 3 years agoCollection of web components designed for business applications
Pixano Elements39over 3 years agoRe-usable web components dedicated to data annotation tasks
Playground Elements552about 2 years agoServerless code experiences with web components
Shoelace13,005almost 2 years agoA forward-thinking library of web components
Smart Web Components438over 2 years agoWeb components for business applications
Stripe Elements81almost 3 years agoCustom Element Wrapper for Stripe.js v3 Elements
TEI Publisher Components18almost 2 years agoCollection of web components used by TEI Publisher and apps generated by it
Titanium Elements18almost 2 years agoCollection of lightweight web components used by Leavitt Group Enterprises
Tradeshift Elements17almost 2 years agoReusable Tradeshift UI Components as Web Components
TrendChart Elements50about 2 years agoComponents to generate simple, light and responsive charts
Umbraco UI Components125almost 2 years agoCollection of user interface web components for Umbraco CMS
Vaadin components476almost 2 years agoEvolving set of high-quality web components for building business web applications
VSCode Webview Elements0over 2 years agoComponents for creating VSCode extensions which use the Webview API
Warp View8over 3 years agoCollection of charting web components for Warp 10
Webmarkets web components1almost 2 years agoSet of Webmarkets' public web components
Wired Elements10,537almost 3 years agoSet of common UI elements with a hand-drawn, sketchy look
Wokwi Elements187almost 2 years agoWeb Components for Arduino and various electronic parts
XWeather7almost 6 years agoCollection of web components implementing portions of the OpenWeatherMap API

Awesome Web Components / Real World / Design Systems

Astro Space UX Design System118almost 2 years agoSet of components to build rich space app experiences with established interaction patterns
Auro Design SystemAlaska Airlines design system to innovate on ideas and collaborate on the future
Blueprint UIWeb Component based design system with flexible and lightweight components
Bolt Design System291about 3 years agoTwig and Web Component-powered UI components, reusable visual styles and tooling
Calcite Components298almost 2 years agoShared Web Components for Esri's Calcite design framework
Carbon Web Components478over 3 years agoCarbon Design System variant on top of Web Components
Clarity Core Web Components169almost 2 years agoSuite of web components from the Clarity Design System
Crayons222almost 2 years agoCollection of web components that adheres to the Freshworks Design System
FAST Components9,312almost 2 years agoLibrary of Web Components based on the FAST design language
Fluent UI Web Components18,625almost 2 years agoLibrary of Web Components that supports Microsoft's Fluent design language
Forge Components50almost 2 years agoLibrary of Web Components adhering to the Forge Design System
GOV.UK Web Components4over 5 years agoSet of encapsulated web components consuming the GOV.UK Design System
Helix UI60over 3 years agoWeb Component library for the Helix Design System
Liquid75almost 2 years agoUI component library based on the Liquid Design System
Lyne Components48almost 2 years agoBuilding blocks of the Lyne Design System are based on Web Components
Material Web Components9,441almost 2 years agoMaterial Design implemented as Web Components
Momentum UI Web Components201almost 2 years agoSet of UI components based on Momentum Design
NordNordhealth’s design system for products, digital experiences and brand
NuML | NUDE Elements337over 3 years agoHTML Framework and Design System based on Web Components and runtime CSS generation
OutlineJS129over 2 years agoWeb component based design system starter kit
PatternFly Elements380almost 2 years agoCollection of flexible and lightweight Web Components based on the Unified Design Kit
Pharos Design System123almost 2 years agoJSTOR's design system to create cohesive, supportive, and beautiful experiences
Red Hat Design System104almost 2 years agoWeb components for building uniform experiences with the Red Hat brand
Siemens iX Web Components212almost 2 years agoWeb Components implementing Siemens iX design system
Spectrum Web Components1,301almost 2 years agoAdobe Spectrum design language implementation built with Web Components
UI5 Web Components1,582almost 2 years agoSet of reusable UI elements implementing SAP Fiori Design Guidelines
U-M Library Design SystemUniversity of Michigan Library Design System
Zooplus web components45almost 2 years agoSet of web components that implement Z+ shop style guide

Awesome Web Components / Real World / Use Cases

How we chose to build our Design System using StencilJS Web Components
How searching for a bundle-free React led me to 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 Componentsby
Why we use Web Componentsby

Awesome Web Components / Libraries / Class Based

DNA45almost 2 years agoProgressive Web Components library
element-js26almost 2 years agoSimple and lightweight base classes for web components with a beautiful API
FAST Element9,312almost 2 years agoLightweight library for building performant, memory-efficient, standards-compliant Web Components
Forge Core3almost 2 years agoBuilding blocks and utilities that are used when building Forge Web Components
Joist121almost 2 years agoSet of small libraries designed to add the bare minimum to web components to make you productive
LitSimple library for building fast, lightweight web components
Lightning Web Components1,649almost 2 years agoblazing fast, enterprise-grade Web Components foundation
Omi13,088almost 2 years agoNext generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating)
Panel272almost 2 years agoWeb Components + Virtual DOM: web standards for powerful UIs
slim.js1,023about 3 years agoFast & Robust Front-End Micro-framework based on modern standards
Stencil12,616almost 2 years agoCompiler for generating Web Components
Tonic870over 2 years agoMinimalist, stable, audit friendly component framework
WebCell174almost 2 years agoWeb Components engine based on VDOM, JSX, MobX & TypeScript

Awesome Web Components / Libraries / Functional

atomico1,197almost 2 years agoSmall library for the creation of interfaces based on web components using functions and hooks
haunted2,620almost 2 years agoReact's Hooks API implemented for web components
hybrids3,061almost 2 years agoUI library for creating Web Components with simple and functional API
Solid Element32,617almost 2 years agoLibrary that extends Solid adding Custom Web Components and extensions

Awesome Web Components / Libraries / Integrations

ember-custom-elements15almost 3 years agoRender Ember and Glimmer components using custom elements
preact-custom-element367about 2 years agoGenerate/register a custom element from a preact component
@adobe/react-webcomponent106over 2 years agoAutomate the wrapping of a React component in a custom element
nuxt-custom-elements80almost 2 years agoExport your project components as custom elements for integration into external pages
react-shadow1,321about 2 years agoUtilise Shadow DOM in React with all the benefits of style encapsulation
reactify-wc176over 3 years agoUse web components with React properties and functions
remount721over 3 years agoMount React components to the DOM using custom elements
@riotjs/custom-elements35almost 2 years agoSimple API to create vanilla custom elements with Riot.js

Awesome Web Components / Libraries / Benchmarks

All the Ways to Make a Web Component
web-components-benchmarkBenchmark Web Components technologies with various examples
web-components-todoThe same todo application built in different Web Components libraries for benchmark purpose

Awesome Web Components / Frameworks / Angular

Angular Elements Overview
Building and consuming Angular Elements as Web Components
How to use Angular ngModel and ngForms with WebComponents
Using Web Components in Angular
Web Components With Angular Ivy In 6 Steps

Awesome Web Components / Frameworks / React

3 Approaches to Integrate React with Custom Elements
Building Interoperable Web Components That Even Work With React
Rendering React Components With Custom Elements
How to use Web Components in React
Using Web Components With Next (or Any SSR Framework)

Awesome Web Components / Frameworks / Vue

Using Web Components in Vue

Awesome Web Components / Frameworks / Svelte

Svelte Custom Element API
How to Create a Web Component in Svelte
Svelte Web Component — 5.4KB

Awesome Web Components / Meta Frameworks

AMP14,892almost 2 years agoWeb component framework to easily create user-first experiences for the web
EnhanceWeb standards-based HTML framework for building lightweight web applications
luna-js9about 2 years agoSSR framework that makes working with the WebComponents standard a breeze
RocketModern web setup for static sites with a sprinkle of JavaScript
Web Components Compiler93almost 2 years agoCompiler to make server-side rendering of native web components easier
WebC1,334about 3 years agoFramework-independent standalone HTML serializer for generating markup for web components

Awesome Web Components / Meta Frameworks / Starter Kits

Create Open Web ComponentsWeb component project scaffolding
custom-element-boilerplate165almost 2 years agoBoilerplate for creating a custom element
hello-web-components26almost 2 years agoSimple starter hello world web component written in TypeScript
nutmeg115over 2 years agoBuild, test, and publish vanilla Web Components with a little spice

Awesome Web Components / Meta Frameworks / Testing Solutions

capybara-shadowdom14about 3 years agoRuby gem that adds basic support for the Shadow DOM to Capybara
Cypress component tests for LitHow to run component tests for a Lit web component with Cypress
cypress-lit24almost 2 years agoTest your Lit elements and native web components in Cypress with all the modern browsers
Developing Components: TestingUsing @web/test-runner for testing web components in a real browser
How To Automate Shadow DOM In Selenium WebDriverLocating Shadow DOM elements using Selenium WebDriver in a Maven project
Native Automation support for Shadow DOMShadow DOM and open-source testing frameworks
Open Web Components: TestingOpinionated package that combines and configures testing libraries
query-selector-shadow-dom249over 2 years agoquerySelector that can pierce Shadow DOM roots, useful for automated testing
shadow-automation-selenium111over 2 years agoShadow DOM automation using Selenium
Testing Shadow DOM elements in SeleniumIn Selenium 4, there is now a way to access Shadow DOM nodes
Test web components with PlaywrightSo you’ve created a native web component or two. How do you test them in popular browsers?
W3C Webdriver conquering automation of Shadow DOMShadow DOM tree and its interaction with the W3C Webdriver

Awesome Web Components / Meta Frameworks / 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
Custom Elements Locator37over 3 years agoChrome extension to find custom elements on a page
@storybook/web-componentsUI development environment for plain web-component snippets
webcomponents.devComponent IDE for web platform developers
web-component-analyzer509almost 3 years agoCLI that analyzes web components and emits documentation / diagnostics
Web Components Codemods8almost 2 years agoCodemods for Web Components

Awesome Web Components / Books

Web Components in ActionBook by Ben Farrell, available at Manning early release program
Web Component EssentialsBook by Cory Rylan, early preview edition available at Leanpub

Awesome Web Components / Tutorials

Building Web Components with Vanilla JavaScript
Creating a Custom Element from Scratch
Creating a Reusable Avatar Web Component
Creating Web Components with Stencil
Encapsulating Style and Structure with Shadow DOM
Getting started with LitElement and TypeScript
Web Components: from zero to hero
Deep Dive: Web Components & Dependency Injection – The Experiment
Handling data with Web Components
How to use D3js with WebComponents
Navigation Lifecycle using Vaadin Router, LitElement and TypeScript
Recreating The Arduino Pushbutton Using SVG And <lit-element>
Routing Management with LitElement and TypeScript
Snake-Eating Game Making with Web Components of Omi and MVP Architecture
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
Web Components Tools: A Comparison
Where to begin building Web Components? - The Basics
Where to begin building Web Components? - Class-based Libraries

Awesome Web Components / Insights / Podcasts

Code[ish], episode 38: Building with Web Components
Frontend Happy Hour, episode 62: Web Components - shots of shadow DOM
Labs Talk - Web Components with Peter Muessig
Real Talk JavaScript, episode 7: Custom Web Components with Rob Wormald
Real Talk JavaScript, episode 101: Back to Basics with Native HTML and LitElement

Awesome Web Components / Insights / Presentations

Are Web Components the Betamax of web development?by
Designing Standard Systemsby and
Frontend Architecture for Scalable Design Systemsby
lit-apollo: Data-Driven Components that Use the Platformby
Mastering Shadow DOMby
Modernizing Large Frontends with Web Componentsby
Shadow DOM: off the beaten trackby
Using Web Components to Build a Framework-agnostic UI Libraryby and
Web Components and the AOMby
Web Components and Styles Scopingby
Web Components can do that?!by
Web Components: Introduction and State of the Artby

Awesome Web Components / Insights / Talks

Better Apps: Delivering Universal UI Patterns as Web Componentsby
Custom Web Shadow Elements, or Whatever…by
Styling and Theming Web Componentsby
Web Components at Enterprise Scaleby

Awesome Web Components / Usage Metrics

Chrome Platform Status: CustomElementRegistryDefine
Chrome Platform Status: ElementAttachShadow
Chrome Platform Status: HTMLTemplateElement

Awesome Web Components / Proposals / Form-associated Custom Elements

Form Participation API ExplainedDocument by Google Chrome team
Form-associated custom elementsFeature in Chrome platform status
web-platform-tests5,053almost 2 years ago

Awesome Web Components / Proposals / Constructable Stylesheet Objects

Specification Draft
web-platform-tests5,053almost 2 years ago
Explainer137almost 4 years ago
Constructable StylesheetsFeature in Chrome platform status

Awesome Web Components / Proposals / Custom State Pseudo Class

Blink: Intent to implement
ElementInternals's states property and the :state() pseudo class4,404almost 2 years ago

Awesome Web Components / Miscellaneous

bruck513about 3 years agoPrototyping system built with web components and the Houdini Paint API
Vaadin DirectoryPublish, discuss and rate web components
webcomponents.orgDiscuss & share web components

Awesome Web Components / Archive / Polyfills

@webcomponents/custom-elements1,149almost 2 years agoCustom Elements polyfill by Polymer team
document-register-element1,132almost 6 years agoCustom Elements polyfill by Andrea Giammarchi
@corpuscule/custom-builtin-elements12about 6 years agoCustomized built-in elements polyfill by
@ungap/custom-elements-builtin104over 5 years agoCustomized built-in elements polyfill by
@webcomponents/shadydom1,149almost 2 years agoShadowDOM v1 shim
@webcomponents/shadycss1,149almost 2 years agoShadowDOM style encapsulation shim
@lwc/synthetic-shadow1,649almost 2 years agoShadow DOM polyfill by
@webcomponents/template1,149almost 2 years agoMinimal polyfill for
@ungap/import-node7over 6 years agoAn polyfill for IE11 by

Awesome Web Components / Archive / History

A history of the HTML slot element
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
Styling Accessibility: A Web Components Approach
Web Components 101: An Introduction to Web Components
Get started with Vue web components
6 Reasons You Should Use Native Web Components
Web Components in 2018
Web Components Introduction: Creating Custom HTML Elements in 2018
Create & Publish Web Components With Vue CLI 3
Extending Native DOM Elements with Web Components
Styling is critical to web component reuse, but may prove difficult in practice
Web Components: The Long Game
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)
An intro to web components with otters
The broken promise of Web Components
Regarding the broken promise of Web Components
Web Components v1 - the next generation
Introducing Custom Elements
The Case for Custom Elements: Part 1
The Case for Custom Elements: Part 2
Demythstifying Web Components
Extensible web components
Web Component Challenges
Web Components and progressive enhancement
Update on standardizing Shadow DOM and Custom Elements
What's New in Shadow DOM v1 (by examples)
Why web components are so important
Understanding Web Components
Introducing Slot-Based Shadow DOM API
There is an Element for that
What happened to Web Components?
Web Components and their role in the future of web development
Microsoft Edge and Web Components
Bringing componentization to the web: An overview of Web Components
Why Web Components will make the web a better place for our users
Practical Questions around Web Components
The state of Web Components
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
Mozilla and Web Components: Update
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
Why Web Components Are Ready For Production
The State of the Componentised Web
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
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
Building an Accessible Disclosure Button – using Web Components
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?!
Web Components and you – dangers to avoid
HTML as Custom Elements260about 11 years ago
The Web's Declarative, Composable Future
Using Polymer to Create Web Components
The Shadow DOM Diaries
A Detailed Introduction To Custom Elements
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
Performance and Custom Elements
Web Components Revolution
A Guide to Web Components
Return of Inspector Web: Web Components a Year Later
Working with Custom Elements
Creating Reusable Markup with The HTML Template Element
Working with Shadow DOM
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
The Basics of the Shadow DOM
Notes on Web Components + ARIA
Google I/O 2012 - The Web Platform's Cutting Edge
Introduction to Web Components
Web Components and Model Driven Views by Alex Russell
What the Heck is Shadow DOM?

Awesome Web Components / Who To Follow

Polymer
Stencil
open-wc.org
webcomponents.dev
Justin Fagnani
Viljami Salminen
Jan Miksovsky
Serhii Kulykov

Awesome Web Components / Maintainers

@mateusortizCreated by in 2014
@web-padawanMaintained by since 2018

Backlinks from these awesome lists:

More related projects: