Awesome Web Components
A curated list of awesome Web Components resources.
Note This project was previously named "Web Components the Right Way"
Web Components — a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
Contents
- Introduction
- Standards
- Custom Elements
- Shadow DOM
- HTML Templates
- CSS Shadow Parts
- Guides
- Accessibility
- Best Practices
- Codelabs
- Examples
- Articles
- Architecture
- Interoperability
- Limitations
- Styling
- Real World
- Case Studies
- Components
- Component Libraries
- Design Systems
- Use Cases
- Libraries
- Class Based
- Functional
- Integrations
- Benchmarks
- Frameworks
- Angular
- React
- Vue
- Svelte
- Ecosystem
- Meta Frameworks
- Starter Kits
- Testing Solutions
- Tools
- Books
- Tutorials
- Insights
- Podcasts
- Presentations
- Talks
- Usage Metrics
- Proposals
- Form-associated Custom Elements
- Constructable Stylesheet Objects
- Custom State Pseudo Class
- Miscellaneous
- Archive
- Polyfills
- History
- Who To Follow
- Maintainers
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?
Standards
Custom Elements
Custom Elements provide a way for authors to build their own fully-featured DOM elements.
- A Guide to Custom Elements for React Developers
- All about HTML Custom Elements
- 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-tests
Shadow DOM
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.