自定义元素：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。