Skip to content

Mutation Observer

View .md Download

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

Observed content

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

Installation

npm install @nana-tec/ui-components

Import

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

Basic usage

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

API

Properties

Property	Attribute	Type	Default	Description
`attr`	—	`string \| undefined`	`—`	Attribute names to watch (space-separated), or `*` for all
`attrOldValue`	`attr-old-value`	`boolean`	`false`	Include attribute old values in the records
`charData`	`char-data`	`boolean`	`false`	Watch text content changes
`charDataOldValue`	`char-data-old-value`	`boolean`	`false`	Include character-data old values
`childList`	`child-list`	`boolean`	`false`	Watch additions/removals of children
`disabled`	—	`boolean`	`false`	Stop observing

Events

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

Slots

Slot	Description
`(default)`	The content to observe

Events

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

Slots

Slot	Description
`(default)`	The content to observe

Storybook

Explore Mutation Observer interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook