自定义元素：monkeypatch 断开连接回调

Question

我正在编写一个 Web 组件增强器函数，当元素从 DOM 中删除时我需要运行一些东西——但我事后知道这一点。我使用了 MutationObserver - 但我的组件在页面周围使用了很多，并且多个突变观察器导致了性能问题。

这是在没有 MutationObserver 的情况下执行此操作的尝试：

class TestComponent extends HTMLElement {

    disconnectedCallback() {

        console.log('CB');

    }

}

window.customElements.define('test-component', TestComponent);

function enrichComponent(component) {

  const originalDisconnectedCallback = component.disconnectedCallback;

  component.disconnectedCallback = function() {

    originalDisconnectedCallback();

    console.log('CB1');

  }

}

const component = document.createElement('test-component');

enhancer(component);

document.body.appendChild(component);

component.remove(); // logs 'CB' but no 'CB1'

这是行不通的。

有没有办法“monkeypatch” disconnectedCallback？

Answer 1

我会把它分成两个解决方案，每个都更接近特定的用例：我（仍然，是的，我们讨论过）认为，如果是您自己的代码在该组件内创建hiddenElement- 最好在组件内进行整个管理，而不是从外部丰富/扩展它（是的，即使你对整个系统中的几个组件重复了这种模式）如果一个人绝对想从外部增强组件（比如一个人不拥有该类，或者遇到多重继承问题） - 最好采用标准的事件驱动方法 - 应该调度一个事件并且监听器应该附加disconnectedCallback到disconnect它- 否则这个解决方案是不可扩展的/对扩展开放（想想另一个队友需要在断开连接时添加更多逻辑的情况，与第一个侦听器中的逻辑分离的逻辑）

Answer 2

我设法想出了一个有效的“黑客”，并且比突变观察者成本更低。这个想法是在增强器函数内部创建一个组件，将其附加到 Web 组件并从模拟组件内部运行清理函数。这是一个例子：class FormAssociationDisconnectionComponent extends HTMLElement {    disconnectedCallback() {        this.dispatchEvent(new Event('disconnected'));    }}window.customElements.define('form-association-disconnection', FormAssociationDisconnectionComponent);function enrichComponent(component) {  // ... setup a form and a hidden input we need to cleanup  const removeListenerElement = document.createElement('form-association-disconnection');  removeListenerElement.addEventListener('disconnected', () => {        hiddenInput.remove();        hostingForm.removeEventListener('reset', resetFormHandler);  });  inputElement.appendChild(removeListenerElement);}这样，当您的自定义元素被移除时，您可以运行任何您想要的清理，而无需创建多个 MutationObservers。