Examples: The following examples are available:
Event object composed and composedPath properties. See composed-composed-path live.[:defined pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined) works. See defined-pseudo-class live.<editable-list>. A simple example showing how elements can be consolidated to create a list with addable/removable items. Items are added by using a list-item attribute or by entering text and clicking the plus sign. See editable-list live.<edit-word>. Wrapping one or more words in this element means that you can then click/focus the element to reveal a text input that can then be used to edit the word(s). See edit-word live.<element-details>. Displays a box containing an HTML element name and description. Provides an example of an autonomous custom element that gets its structure from a <template> element (that also has its own styling defined), and also contains <slot> elements populated at runtime. See element-details live.<ul is="expanding-list">. Creates an unordered list with expandable/collapsible children. Provides an example of a customized built-in element (the class inherits from HTMLUListElement rather than HTMLElement). See expanding-list live.<custom-square l="" c="">. A trivial example web component that creates a square colored box on the page. The demo also includes buttons to create, destroy, and change attributes on the element, to demonstrate how the web components life cycle callbacks work See life-cycle-callbacks live.<popup-info img="" text="">. Creates an info icon that when focused displays a popup info box. Provides an example of an autonomous custom element that takes information from its attributes, and defines structure and basic style in an attached shadow DOM. See popup-info-box live.<template> and <slot> elements. See simple-template live.<summary-display>. An example that takes as its two slot values a list of possible choices, and a description for the selected choice. Multiple paragraphs are included inside the element containing all the possible descriptions; when a choice is clicked, its corresponding description paragraph is given an appropriate slot attribute so that it appears in the second slot. This example is written to demonstrate usage of the slotchange attribute, and features of the HTMLSlotElement interface See the slotchange example live.::slotted pseudo-element works. See slotted-pseudo-element live.<word-count>. When added to an element, counts all the words inside that element and displays them inside an attached shadow DOM. It also contains an interval that periodically updates the word count as it changes. Provides an example of a customized built-in element (the class inherits from HTMLParagraphElement rather than HTMLElement). See word-count live.Components ("Standalones")
Extensions: Web Components that extend or add to an existing semantic element.
Form: Web Components that are, or can be used with, form submissions.
Utility: Useful little Web Components.
Media: Web Components that are, or can be used with, media of any kind.
Design: Web Components that help with visual presentation.
Custom: Frequently-solved problems in web component form.
Novelty
Accessible: (from https://scottaohara.github.io/accessible_components/) I've [sic] built a good handful of accessible markup patterns and widgets at this point. Most of which were bespoke and incorporated into websites/products. But, there are a baseline patterns I was able to use over and over again, and the following represent the most common widgets that I was able to distill into basic examples (i.e., vanicall html/css/js). Each was based on testing with users, UX and design needs from those past projects, and from following normative specifications & informative notes.
Last modified 21 June 2026