{"id":14990328,"url":"https://github.com/pmdartus/event-visualizer","last_synced_at":"2025-04-12T02:11:02.354Z","repository":{"id":52595260,"uuid":"347882065","full_name":"pmdartus/event-visualizer","owner":"pmdartus","description":"A visualization tool to better understand how events propagate in the shadow DOM.","archived":false,"fork":false,"pushed_at":"2021-04-24T05:54:28.000Z","size":912,"stargazers_count":39,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T16:41:14.958Z","etag":null,"topics":["event","shadow-dom","web-component"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pmdartus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-15T07:56:18.000Z","updated_at":"2024-02-22T03:50:38.000Z","dependencies_parsed_at":"2022-09-14T13:01:25.514Z","dependency_job_id":null,"html_url":"https://github.com/pmdartus/event-visualizer","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmdartus%2Fevent-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmdartus%2Fevent-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmdartus%2Fevent-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmdartus%2Fevent-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pmdartus","download_url":"https://codeload.github.com/pmdartus/event-visualizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247608023,"owners_count":20965950,"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":["event","shadow-dom","web-component"],"created_at":"2024-09-24T14:19:54.029Z","updated_at":"2025-04-12T02:11:02.329Z","avatar_url":"https://github.com/pmdartus.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Event visualizer\n\nA visualization tool to better understand how events propagate in the shadow DOM.\n\n![Build status](https://github.com/pmdartus/event-visualizer/actions/workflows/ci.yml/badge.svg)\n![NPM](https://img.shields.io/npm/v/@pmdartus/event-visualizer)\n\n## Overview\n\nThe way DOM events propagate in the shadow DOM is not intuitive for developers onboarding with web components. Event configuration, DOM structure and `closed` vs. `opened` shadow trees are many factors influencing event propagation.\n\nThis project is an attempt to bring clarity to this subject by offering a visual playground explaining how events propagates step-by-step in the shadow DOM.\n\n[![Event visualizer screenshot](images/screenshot.png)](https://codepen.io/pmdartus/pen/GRrWxQY?editors=1000)\n\n**Try it out:** [Demo / Playground](https://codepen.io/pmdartus/pen/GRrWxQY?editors=1000)\n\n## Installation\n\nThis package can be consumed as an NPM package.\n\n```sh\n$ npm install --save @pmdartus/event-visualizer\n```\n\nAlternatively for drop-in consumption this package can directly be loaded from [Skypack](https://www.skypack.dev/) CDN.\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.skypack.dev/@pmdartus/event-visualizer\"\u003e\u003c/script\u003e\n```\n\n## `\u003cevent-visualizer\u003e`\n\n### Properties / Attributes\n\n| Property        | Attribute        | Type      | Default               | Description                                                                                                                         |\n| --------------- | ---------------- | --------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |\n| `label`         | `label`          | `string`  | `\"Event propagation\"` | The label name.                                                                                                                     |\n| `eventBubbles`  | `event-bubbles`  | `boolean` | `false`               | Indicates wether the dispatched event should [bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) or not.      |\n| `eventComposed` | `event-composed` | `boolean` | `false`               | Indicates wether the dispatched event should be [composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) or not. |\n\n### Slots\n\n| Name    | Description                                                                                                                                                      |\n| ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| default | Accepts a single `\u003ctemplate\u003e` element representing the DOM tree to visualize. Refer to the [DOM tree definition](#dom-tree-definition) section for more details. |\n\n## DOM tree definition\n\nThe visualized DOM tree is configured by passing a `\u003ctemplate\u003e` element in the default slot. The content of the template tag is interpreted by the `\u003cevent-visualizer\u003e` custom element to render the visual previous of the DOM tree and emulate event dispatching:\n\n- Shadow trees can be defined directly in HTML via the [declarative shadow DOM](https://github.com/mfreed7/declarative-shadow-dom) syntax with the difference difference that the `shadow-root` attribute is renamed to `data-shadow-root`.\n- The original event target is defined by adding a `target` attribute.\n- A label can be added to any element using the `id` attribute.\n- Restrictions:\n  - The template content should have root element.\n  - The DOM should have a one element with the `target` attribute.\n\n```html\n\u003cevent-visualizer label=\"Simple tree\"\u003e\n  \u003ctemplate\u003e\n    \u003cdiv id=\"a\"\u003e\n      \u003cdiv id=\"b\" target\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/event-visualizer\u003e\n\n\u003cevent-visualizer label=\"Simple shadow tree\"\u003e\n  \u003ctemplate\u003e\n    \u003cdiv id=\"a\"\u003e\n      \u003ctemplate data-shadowroot=\"open\"\u003e\n        \u003cdiv id=\"b\" target\u003e\u003c/div\u003e\n      \u003c/template\u003e\n      \u003cdiv id=\"c\"\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/event-visualizer\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmdartus%2Fevent-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpmdartus%2Fevent-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmdartus%2Fevent-visualizer/lists"}