访问官网
GithubAwesome 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
- Guides
- Articles
- Real World
- Libraries
- Frameworks
- Ecosystem
- Books
- Tutorials
- Insights
- Usage Metrics
- Proposals
- Miscellaneous
- Archive
- 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.
- 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 depth
- 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-tests
HTML Templates
<template> element is used to declare fragments of HTML that can be cloned and inserted in the document by script.
- Crafting Reusable HTML Templates
- HTML Living Standard: The
templateelement - 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-tests
CSS Shadow Parts
CSS Shadow Parts allow developers to expose certain elements inside Shadow DOM for styling purposes.
- W3C First Public Working Draft
- CSS Shadow Parts are coming!
- MDN -
::part()CSS pseudo element - MDN -
partglobal attribute - ::part and ::theme, an ::explainer
- web-platform-tests
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
Best Practices
- Custom Element Best Practices
- Developing Components: Publishing
- Gold Standard Checklist for Web Components
- Guidelines for creating web platform compatible components
- How to Publish Web Components to NPM
- Open Web Components Recommendations
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
Examples
- generic-components - Collection of generic web components with a focus on accessibility, and ease of use.
- howto-components - Collection of web components that implement common web UI patterns.
- Nude UI - Collection of accessible, customizable, ultra-light web components.
- open-wc code examples - Collection of best practices and design patterns for developing web components.
- vanilla-retro-js - Vanilla JS UI component library of HTML deprecated tags.
- web-components-examples - Series of web components examples, related to the MDN web components documentation.
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
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
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
- 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
Real World
Case Studies
- Apple Just Shipped Web Components to Production and You Probably Missed It
- [Bringing Order to Web Design Chaos (with Web
