如何从Web组件混合中删除事件侦听器->类型'HTMLElement'上不存在属性'disconnectedCallback'

Question

I am building a typescript mixin for web components to add drag behvior. Until now everything worked pretty nice. However I have a difficult problem when trying to remove an event listener after the draggable web component was disconnected.

drag.ts - Adds drag behavior to HTMLElements

type Constructor = new (...args: any[]) => HTMLElement

export function Drag<BC extends Constructor>(BaseClass: BC) {

    return class Drag extends BaseClass {

        constructor(...args: any[]) {
            super(...args)

            // Somehow I need to remove this listener when the component is disconnected
            document.addEventListener(UPDATE_ACTIVE_DRAG_SET, this.handleToggleDrag)
        }

        disconnectedCallback() {

            // This mehods must be implemented by a web component
            // Not all web components that will receive the drag behavior 
            // will ahve a disconnectedCallback defined
            // So typescript must be right when it gives an error
            super.disconnectedCallback()

            // These work just fine (HTMLElement implements them)
            super.innerHTML
            super.querySelector('div')
        }

        // ...more stuff here
    }
}

main-menu.ts - Possible candidate for drag behavior

export class MainMenu extends HTMLElement{
    // ... implementation of the web component

    // <!> It is very likely that not all components will implement this
    disconnectedCallback() {} 
}

window.customElements.define('main-menu', DragAndDropLayout(MainMenu))

The only idea I have so far is monkey patching the HTMLElement to include a dummy disconnectedCallback so that super.disconnectedCallback will not complain with this error: Property 'disconnectedCallback' does not exist on type 'HTMLElement' . I haven't tried it yet. Is there a nicer way to fix this?

Answer 1

Your mixin can test for the presence of a method in a superclass:

disconnectedCallback() {
  if (super.disconnectedCallback) {
    super.disconnectedCallback();
  }
  // Do mixin work here.
}

This Elix project, which makes heavy use of mixins, explores this topic in its composition rules for mixin methods and properties .

We use this approach successfully with TypeScript. Note that it's also possible to create TypeScript definition files for your mixin such that TypeScript will know what mixin methods/properties are available to a component using your mixin. Our current definition for a Mixin generic type is at https://github.com/elix/elix/blob/master/src/shared.d.ts .