Utilities
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.
Preview
Section titled “Preview”Observed content
<nana-mutation-observer>
<div>Observed content</div>
</nana-mutation-observer>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/mutation-observer";Basic usage
Section titled “Basic usage”<nana-mutation-observer> <div>Observed content</div></nana-mutation-observer>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
attr | 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 | disabled | boolean | false | Stop observing |
Events
| Event | Description |
|---|---|
nana-mutation | Fired on change (detail.mutationList) |
Slots
| Slot | Description |
|---|---|
(default) | The content to observe |
Events
Section titled “Events”| Event | Type | Description |
|---|---|---|
nana-mutation | CustomEvent | Fired on change (detail.mutationList) |
| Slot | Description |
|---|---|
(default) | The content to observe |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Mutation Observer interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook