{"id":13403193,"url":"https://github.com/mdn/web-components-examples","last_synced_at":"2025-05-13T21:12:06.533Z","repository":{"id":27391743,"uuid":"113729928","full_name":"mdn/web-components-examples","owner":"mdn","description":"A series of web components examples, related to the MDN web components documentation at https://developer.mozilla.org/en-US/docs/Web/Web_Components.","archived":false,"fork":false,"pushed_at":"2025-04-17T16:12:42.000Z","size":99,"stargazers_count":3237,"open_issues_count":5,"forks_count":813,"subscribers_count":91,"default_branch":"main","last_synced_at":"2025-04-28T17:12:30.204Z","etag":null,"topics":["examples","web-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-12-10T06:54:12.000Z","updated_at":"2025-04-27T02:48:11.000Z","dependencies_parsed_at":"2024-05-03T10:00:27.542Z","dependency_job_id":"35d13ddf-d41a-4488-a3ef-1ebf4554e2df","html_url":"https://github.com/mdn/web-components-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdn%2Fweb-components-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdn%2Fweb-components-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdn%2Fweb-components-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdn%2Fweb-components-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdn","download_url":"https://codeload.github.com/mdn/web-components-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254029008,"owners_count":22002284,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["examples","web-components"],"created_at":"2024-07-30T19:01:26.639Z","updated_at":"2025-05-13T21:12:01.521Z","avatar_url":"https://github.com/mdn.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Guides","Learning Resources"],"sub_categories":["Examples","References"],"readme":"# web-components-examples\nA series of Web Components examples, related to the MDN Web Components documentation at https://developer.mozilla.org/en-US/docs/Web/API/Web_components.\n\n\u003e Please refer to our [contribution guidelines](https://github.com/mdn/web-components-examples/blob/main/CONTRIBUTING.md) before contributing.\n\nThe following examples are available:\n\n* [composed-composed-path](composed-composed-path). A very simple example that shows the behavior of the \u003ccode\u003eEvent\u003c/code\u003e object \u003ccode\u003ecomposed\u003c/code\u003e and \u003ccode\u003ecomposedPath\u003c/code\u003e properties. [See composed-composed-path live](https://mdn.github.io/web-components-examples/composed-composed-path/).\n* [defined-pseudo-class](defined-pseudo-class). A very simple example that shows how the \u003ccode\u003e[:defined pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:defined)\u003c/code\u003e works. [See defined-pseudo-class live](https://mdn.github.io/web-components-examples/defined-pseudo-class/).\n* [editable-list](editable-list) – \u003ccode\u003e\u0026lt;editable-list\u0026gt;\u003c/code\u003e.  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](https://mdn.github.io/web-components-examples/editable-list/).\n* [edit-word](edit-word) — \u003ccode\u003e\u0026lt;edit-word\u0026gt;\u003c/code\u003e. 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](https://mdn.github.io/web-components-examples/edit-word/).\n* [element-details](element-details) — \u003ccode\u003e\u0026lt;element-details\u0026gt;\u003c/code\u003e. Displays a box containing an HTML element name and description. Provides an example of an autonomous custom element that gets its structure from a \u003ccode\u003e\u0026lt;template\u0026gt;\u003c/code\u003e element (that also has its own styling defined), and also contains \u003ccode\u003e\u0026lt;slot\u0026gt;\u003c/code\u003e elements populated at runtime. [See element-details live](https://mdn.github.io/web-components-examples/element-details/).\n* [expanding-list-web-component](expanding-list-web-component) — \u003ccode\u003e\u0026lt;ul is=\"expanding-list\"\u0026gt;\u003c/code\u003e. Creates an unordered list with expandable/collapsible children. Provides an example of a customized built-in element (the class inherits from \u003ccode\u003eHTMLUListElement\u003c/code\u003e rather than \u003ccode\u003eHTMLElement\u003c/code\u003e). [See expanding-list live](https://mdn.github.io/web-components-examples/expanding-list-web-component/).\n* [life-cycle-callbacks](life-cycle-callbacks) — \u003ccode\u003e\u0026lt;custom-square l=\"\" c=\"\"\u0026gt;\u003c/code\u003e. 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](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) work [See life-cycle-callbacks live](https://mdn.github.io/web-components-examples/life-cycle-callbacks/).\n* [popup-info-box-web-component](popup-info-box-web-component) — \u003ccode\u003e\u0026lt;popup-info img=\"\" text=\"\"\u0026gt;\u003c/code\u003e. 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](https://mdn.github.io/web-components-examples/popup-info-box-web-component/).\n* [simple-template](simple-template) — A very simple trivial example that quickly demonstrates usage of the \u003ccode\u003e\u0026lt;template\u0026gt;\u003c/code\u003e and \u003ccode\u003e\u0026lt;slot\u0026gt;\u003c/code\u003e elements. [See simple-template live](https://mdn.github.io/web-components-examples/simple-template/).\n* [slotchange example](slotchange) — \u003ccode\u003e\u0026lt;summary-display\u0026gt;\u003c/code\u003e. 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](https://mdn.github.io/web-components-examples/slotchange).\n* [slotted-pseudo-element](slotted-pseudo-element). A very simple example that shows how the \u003ccode\u003e::slotted\u003c/code\u003e pseudo-element works. [See slotted-pseudo-element live](https://mdn.github.io/web-components-examples/slotted-pseudo-element/).\n* [word-count-web-component](word-count-web-component) — \u003ccode\u003e\u0026lt;word-count\u0026gt;\u003c/code\u003e. 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 \u003ccode\u003eHTMLParagraphElement\u003c/code\u003e rather than \u003ccode\u003eHTMLElement\u003c/code\u003e). [See word-count live](https://mdn.github.io/web-components-examples/word-count-web-component/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdn%2Fweb-components-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdn%2Fweb-components-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdn%2Fweb-components-examples/lists"}