Mutation Observer

A utility wrapper around MutationObserver. Watches its slotted content for attribute, child-list, subtree or character-data changes and emits nana-mutation.

Usage

mutation-observer.html
html
1 <nana-mutation-observer attr="class" child-list>
2 <div class="watched">…</div>
3 </nana-mutation-observer>
4
5 <script>
6 document.querySelector('nana-mutation-observer')
7 .addEventListener('nana-mutation', (e) => console.log(e.detail.mutationList));
8 </script>

Import

main.ts
ts
1 import "@nana-tec/ui-components/mutation-observer";

Props

AttributeTypeDescription
attrstringAttribute names to watch (space-separated) or *
attr-old-valuebooleanInclude attribute old values
child-listbooleanWatch additions/removals
char-databooleanWatch text content
char-data-old-valuebooleanInclude character-data old values
disabledbooleanStop observing