https://github.com/pmdartus/event-visualizer
A visualization tool to better understand how events propagate in the shadow DOM.
https://github.com/pmdartus/event-visualizer
event shadow-dom web-component
Last synced: about 1 year ago
JSON representation
A visualization tool to better understand how events propagate in the shadow DOM.
- Host: GitHub
- URL: https://github.com/pmdartus/event-visualizer
- Owner: pmdartus
- License: mit
- Created: 2021-03-15T07:56:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-24T05:54:28.000Z (about 5 years ago)
- Last Synced: 2024-04-25T16:41:14.958Z (about 2 years ago)
- Topics: event, shadow-dom, web-component
- Language: TypeScript
- Homepage:
- Size: 891 KB
- Stars: 39
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Event visualizer
A visualization tool to better understand how events propagate in the shadow DOM.
## Overview
The 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.
This 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.
[](https://codepen.io/pmdartus/pen/GRrWxQY?editors=1000)
**Try it out:** [Demo / Playground](https://codepen.io/pmdartus/pen/GRrWxQY?editors=1000)
## Installation
This package can be consumed as an NPM package.
```sh
$ npm install --save @pmdartus/event-visualizer
```
Alternatively for drop-in consumption this package can directly be loaded from [Skypack](https://www.skypack.dev/) CDN.
```html
```
## ``
### Properties / Attributes
| Property | Attribute | Type | Default | Description |
| --------------- | ---------------- | --------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `label` | `label` | `string` | `"Event propagation"` | The label name. |
| `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. |
| `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. |
### Slots
| Name | Description |
| ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| default | Accepts a single `` element representing the DOM tree to visualize. Refer to the [DOM tree definition](#dom-tree-definition) section for more details. |
## DOM tree definition
The visualized DOM tree is configured by passing a `` element in the default slot. The content of the template tag is interpreted by the `` custom element to render the visual previous of the DOM tree and emulate event dispatching:
- 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`.
- The original event target is defined by adding a `target` attribute.
- A label can be added to any element using the `id` attribute.
- Restrictions:
- The template content should have root element.
- The DOM should have a one element with the `target` attribute.
```html
```