mdn/web-components-examples

web-components-examples

A series of Web Components examples, related to the MDN Web Components documentation at https://developer.mozilla.org/en-US/docs/Web/API/Web_components.

Please refer to our contribution guidelines before contributing.

The following examples are available:

• composed-composed-path. A very simple example that shows the behavior of the Event object composed and composedPath properties. See composed-composed-path live.
• defined-pseudo-class. A very simple example that shows how the :defined pseudo-class works. See defined-pseudo-class live.
• editable-list – <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 — <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 — <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.
• expanding-list-web-component — <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.
• life-cycle-callbacks — <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-box-web-component — <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.
• simple-template — A very simple trivial example that quickly demonstrates usage of the <template> and <slot> elements. See simple-template live.
• slotchange example — <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. A very simple example that shows how the ::slotted pseudo-element works. See slotted-pseudo-element live.
• word-count-web-component — <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.