Skip to content
A series of web components examples, related to the MDN web components documentation at https://developer.mozilla.org/en-US/docs/Web/Web_Components.
Branch: master
Clone or download
chrisdavidmills Merge pull request #19 from brunoais/patch-1
lifecycle-callbacks: Simplified updateStyle()
Latest commit 76ba16b Apr 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
composed-composed-path Use `const` instead of `let` Jul 28, 2018
defined-pseudo-class Use `shadowRoot` const Jul 28, 2018
edit-word Improved edit-word demo Oct 24, 2018
editable-list up Nov 27, 2018
element-details Use const instead of var Dec 28, 2017
expanding-list-web-component Use `forEach` and `const` instead of `var` Jul 28, 2018
host-selectors Use template literals and `const` instead of `let` Jul 27, 2018
life-cycle-callbacks lifecycle-callbacks: Simplified updateStyle() Apr 10, 2019
popup-info-box-web-component Use template literal and `const` instead of `var` Jul 27, 2018
simple-template Normalise indentation Jul 27, 2018
slotchange Use `forEach`, template literals and `const` instead of `let` Jul 27, 2018
slotted-pseudo-element Use template literals and `const` instead of `let` Jul 27, 2018
word-count-web-component Use template literals and `const` instead of `var` Jul 27, 2018
CODE_OF_CONDUCT.md adding COC file Apr 4, 2019
README.md

README.md

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/Web_Components.

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.
  • 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.
You can’t perform that action at this time.