# mut-obs

> Web component wrapper around the mutation observer

Latest version **0.0.10** (published 2021-08-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install mut-obs
pnpm add mut-obs
yarn add mut-obs
bun add mut-obs
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2021-08-15 |
| First published | 2019-11-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 13 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | bahrus |
| Keywords | Web Components, Custom Elements |

## Links

- npm: https://www.npmjs.com/package/mut-obs
- Repository: https://github.com/bahrus/mut-obs
- Homepage: https://github.com/bahrus/mut-obs#readme
- Issues: https://github.com/bahrus/mut-obs/issues
- npm.io page: https://npm.io/package/mut-obs

## Recent versions

- 0.0.10 (latest) — 2021-08-15
- 0.0.9 — 2021-07-10
- 0.0.8 — 2021-05-20
- 0.0.7 — 2021-04-25
- 0.0.6 — 2021-04-25
- 0.0.5 — 2021-04-25
- 0.0.4 — 2021-04-06
- 0.0.3 — 2021-03-22
- 0.0.2 — 2020-12-20
- 0.0.1 — 2020-12-11
- 0.0.0 — 2019-11-22

## README

# mut-obs

mut-obs is a web component wrapper around the mutation observer

```html
<mut-obs -observe -attributes -attr-filter -child-list -subtree -on -dispatch -unmatch-dispatch -bubbles -composed -cancelable></mut-obs>
```

observe is a required css selector that "up searches" -- it searches for a css match on its previous siblings, then parent, then previous sibling parents, etc., stopping at shadowDOM boundary.  The mutation observer is applied to that element, based on "attributes", "attr-filter", "child-list", "subtree" attributes.

on is a required css selector.  The added or removed node is tested with this attribute using the matches() method. 

If the test fails, nothing happens (unless unmatch-dispatch is set).  If it passes...

"dispatch" is the name of the event to fire if the "on" test passes. 

For example:

```html
<my-element></my-element>
<mut-obs observe=* attributes on=* dispatch=my-element-mutates></mut-obs>
```

Event "my-element-mutates" will be fired when mutations occur.  

Another event, "watching-for-my-element-mutates" is fired the moment mutation observation begins.

[TODO] Find a way to consolidate multiple mut-obs's into one.

---
_Source: https://npm.io/package/mut-obs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._