https://github.com/webreflection/element-observer

A MutationObserver inspired observer for Custom Elements like mutations on any DOM element.
https://github.com/webreflection/element-observer

Last synced: over 1 year ago
JSON representation

A MutationObserver inspired observer for Custom Elements like mutations on any DOM element.

• Host: GitHub
• URL: https://github.com/webreflection/element-observer
• Owner: WebReflection
• License: isc
• Created: 2021-03-25T10:54:53.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-08-08T11:02:34.000Z (about 5 years ago)
• Last Synced: 2025-04-14T00:09:16.024Z (over 1 year ago)
• Language: JavaScript
• Size: 18.6 KB
• Stars: 31
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ElementObserver

## Update

Don't miss out [Pretty Cool Elements](https://github.com/WebReflection/p-cool#readme), which is entirely based on *Custom Elements* primitives, and it's even easier to use, and graceful enhance, with any project out there 👍

- - -

A *MutationObserver* inspired observer for *Custom Elements* like mutations on any DOM element.

```js

import ElementObserver from '@webreflection/element-observer';

const observer = new ElementObserver({

  // optional, used only if options for attributes are used

  attributeChangedCallback(element, name, oldValue, newValue) {

    // all observed attributes will be triggered right away if present,

    // when the element is observed, and *before* connectedCallback,

    // as it is for Custom Elements

  },

  // optional, used when the element is connected

  connectedCallback(element) {

    // if the element is already connected when observed, this is triggered.

  },

  // optional, used when the element is disconnected

  disconnectedCallback(element) {}

});

observer.observe(

  observedElement,

  // optional, if present is used to define attributes

  {

    // optional, if omitted will observe all attributes

    attributeFilter: ['only', 'these'],

    // optional, if omitted oldValue is always null

    attributeOldValue: true,

    // optional, if any of the previous properties are defined,

    // this is implicitly set as true

    attributes: true

  }

);

observer.disconnect(

  // optional, if an element is passed, only that element

  // stops being observed, otherwise all observed elements

  // will immediately stop being observed

  observedElement

);

```

See [MutationObserver.observe()](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe) to better understand attributes properties.