wicg/webcomponents

★ 4,488HTMLAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((Web Components))
    What it does
      Native reusable elements
      Framework-independent
      W3C standard coordination
    Four Core Pieces
      Shadow DOM
      Custom Elements
      HTML Templates
      CSS Scoping
    In Progress
      HTML Modules
    Abandoned
      HTML Imports
    How to Use
      File issues per spec repo
      DOM working group
      HTML working group
    Audience
      Web developers
      Standards contributors

mindmap root((Web Components)) What it does Native reusable elements Framework-independent W3C standard coordination Four Core Pieces Shadow DOM Custom Elements HTML Templates CSS Scoping In Progress HTML Modules Abandoned HTML Imports How to Use File issues per spec repo DOM working group HTML working group Audience Web developers Standards contributors

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a reusable date-picker custom element that works in any framework without React or Vue dependencies

USE CASE 2

Use Shadow DOM to create a self-contained widget with private CSS that never leaks styles into or out of the component

USE CASE 3

Track ongoing discussions and proposals for HTML Modules and other future Web Components features by browsing the issue tracker

USE CASE 4

Learn the Web Components standard before filing bug reports or proposals against the correct W3C spec repository

Tech stack

HTMLJavaScriptCSSWeb Standards

Getting it running

Difficulty · easy Time to first run · 5min

No code to run, this is a standards coordination repo, browse issues and link to the individual spec repositories for actual implementation details.

No license information provided in the explanation.

In plain English

Web Components is a set of browser standards that lets developers create their own reusable HTML elements, complete with their own behavior and styling, and use them in web pages the same way built-in elements like a button or video tag work. The goal is to give developers a native, framework-independent way to build isolated, self-contained components. This repository is maintained by the W3C (the organization that sets web standards) and WICG (the Web Incubator Community Group, which develops early-stage web platform proposals). It serves as the coordination point and issue tracker for the Web Components family of specifications. The README explains that the individual pieces of Web Components have each been moved to their permanent homes in other standards documents as they matured. The four main pieces are: Shadow DOM, which lets an element carry its own private document tree with styles that don't leak in or out, Custom Elements, which lets developers define their own HTML tags with JavaScript behavior attached, HTML Templates, which provides a way to declare inert HTML markup that can be cloned and inserted at any time, and CSS Scoping and Shadow Parts, which are the CSS features that let you style inside a shadow tree from outside. A fifth area, HTML Modules, is still being developed. It would allow HTML markup to be imported and reused the same way JavaScript modules work today. One earlier proposal, HTML Imports, was fully abandoned and is listed in the README under abandoned features. This repository no longer contains the active specification text for most of these features. The README directs contributors to file issues against the specific standards repositories (DOM, HTML, or CSS working group) rather than here, since each spec now lives elsewhere.

Copy-paste prompts

Prompt 1

Show me how to define a custom HTML element using the Custom Elements API that displays a star rating widget and can be used in any HTML page without a framework.

Prompt 2

Using Shadow DOM, write a web component that encapsulates its own CSS so its styles never conflict with the rest of the page.

Prompt 3

How do I use HTML Templates to declare reusable markup that is cloned and inserted into the DOM dynamically without causing render side effects?

Prompt 4

Explain CSS Shadow Parts and show me how to expose specific parts of a shadow DOM component for external styling.

Prompt 5

What is the current status of HTML Modules as a Web Components feature and how does it differ from the abandoned HTML Imports proposal?

Open on GitHub → Explain another repo

← wicg on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.