Neat Paraskavedekatriaphobia's Meaning

    element-notifier

    0.2.0 • Public • Published

    element-notifier

    A MutationObserver dis/connected helper.

    import {notify} from 'element-notifier';
    
    const observer = notify(
      // callback that receives any connected/disconnected element
      (element, connected) => {
        if (connected)
          console.log(element, 'has been connected');
        else
          console.log(element, 'has been disconnected');
      },
    
      // optional arguments
      document,         // the root element to observe
      MutationObserver  // a MutationObserver (non DOM envs)
    );

    The observer is a regular MutationObserver instance with an extra .add(node) method to observe mutations within fragments too (example: shadowRoot nodes).

    Why?

    The MutationObserver dance with records is easily error prone:

    • records are triggered lazily in a bizarre order
    • records are related to single containers, but inner elements are not notified
    • it's difficult to ensure that within a MutationObserver callback, all elements, in the right order of events, get passed along uniquely per event

    This helper does just this: it passes to the callback every element that has been added, or removed, from the document.

    About ShadowDOM

    While the observer could crawl nodes within a shadowRoot, in case it's opened, if nodes are removed from it nothing is notified due MutationObserver limitations.

    If observing nodes appended or removed from any shadowRoot is desired, or at least any open one, it is necessary to somehow pollute the Element.prototype in a similar way:

    const {attachShadow} = Element.prototype;
    Element.prototype.attachShadow = function (init) {
      const shadowRoot = attachShadow.call(this, init);
      if (init.mode === 'open')
        observer.add(shadowRoot);
      return shadowRoot;
    };

    It is not responsibility of this module to augment the environment so it's up to this module consumers decide if doing so is needed or desired.

    Please note that connected might mislead in case the shadowRoot is not live yet, as the MutationObserver in fragments doesn't care about their owner state.

    Install

    npm i element-notifier

    DownloadsWeekly Downloads

    456

    Version

    0.2.0

    License

    ISC

    Unpacked Size

    10.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • webreflection