Hooking into connected and disconnected callbacks fails

[philkunz]

import * as plugins from './domtools.plugins';
import { LitElement } from 'lit-element';

export class ElementInstrumenter {
  connectedElements = new plugins.lik.ObjectMap<LitElement>();

  public instrumentElement(elementArg: LitElement) {
    const originalConnectedCallback = elementArg.connectedCallback;
    const originalDisconnectedCallback = elementArg.disconnectedCallback;

    if (!elementArg.parentElement) {
      elementArg.connectedCallback = () => {
        this.connectedElements.add(elementArg);
        originalConnectedCallback.apply(elementArg);
      };
    } else {
      this.connectedElements.add(elementArg);
    }

    elementArg.disconnectedCallback = () => {
      this.connectedElements.remove(elementArg);
      originalDisconnectedCallback.apply(elementArg);
    };

  }

  public async forEachelement(eachFuncArg: (elementArg: LitElement) => Promise<void>) {
    for (const elementArg of this.connectedElements.getArray()) {
      await eachFuncArg(elementArg);
    }
  }
}

I have the above class. However hooking into the callbacks that way does not work. Any obvious reason why?

[ChristianUlbrich]

Either it's a race condition (you are instrumenting, after CustomElements have been defined and added) or it is an issue with prototypes. You are not showing the rest of your code (how and when do you instrument). At first glance, if you do instrumentation like that, I am betting, you are overwriting instance methods where you should override prototype methods.

An easier way would be class-based expression mixins (aka High Order Components) and I think this is the preferred way in LitElement itself for composition; they have a lot of advantages (working instanceof...); you'd collect the connected instances either in a closure or in a global.

[philkunz]

I solved it by writing an extension class for lit-element that would use connectedCallback und disconnectedCallback to emit events for connected and disconnected. This will then allow the instrumented to subscribe to those events and unsubscribe upon dom disconnection.