# Mutation Observer

> Source: https://design.nanatec.co.ke/components/mutation-observer/
> Watches its slotted content for DOM changes via `MutationObserver` and emits `nana-mutation` with the records. Useful for reacting to attribute, child-list, subtree or character-data changes without wiring observers by hand.

Watches its slotted content for DOM changes via `MutationObserver` and emits `nana-mutation` with the records. Useful for reacting to attribute, child-list, subtree or character-data changes without wiring observers by hand.

## Preview

```html
<nana-mutation-observer>
  <div>Observed content</div>
</nana-mutation-observer>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/mutation-observer";
```

## Basic usage

```html
<nana-mutation-observer>
  <div>Observed content</div>
</nana-mutation-observer>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-mutation` | `CustomEvent` | Fired on change (`detail.mutationList`) |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The content to observe |

## Related components

<ul class="related not-content">
  <li><a href="/components/resize-observer/">Resize Observer</a></li>
  <li><a href="/components/include/">Include</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-mutation-observer--docs