2 回答

TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個(gè)贊
我會(huì)把它分成兩個(gè)解決方案,每個(gè)都更接近特定的用例:
我(仍然,是的,我們討論過(guò))認(rèn)為,如果是您自己的代碼在該組件內(nèi)創(chuàng)建
hiddenElement
- 最好在組件內(nèi)進(jìn)行整個(gè)管理,而不是從外部豐富/擴(kuò)展它(是的,即使你對(duì)整個(gè)系統(tǒng)中的幾個(gè)組件重復(fù)了這種模式)如果一個(gè)人絕對(duì)想從外部增強(qiáng)組件(比如一個(gè)人不擁有該類,或者遇到多重繼承問(wèn)題) - 最好采用標(biāo)準(zhǔn)的事件驅(qū)動(dòng)方法 - 應(yīng)該調(diào)度一個(gè)事件并且監(jiān)聽器應(yīng)該附加
disconnectedCallback
到disconnect
它- 否則這個(gè)解決方案是不可擴(kuò)展的/對(duì)擴(kuò)展開放(想想另一個(gè)隊(duì)友需要在斷開連接時(shí)添加更多邏輯的情況,與第一個(gè)偵聽器中的邏輯分離的邏輯)

TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超10個(gè)贊
我設(shè)法想出了一個(gè)有效的“黑客”,并且比突變觀察者成本更低。
這個(gè)想法是在增強(qiáng)器函數(shù)內(nèi)部創(chuàng)建一個(gè)組件,將其附加到 Web 組件并從模擬組件內(nèi)部運(yùn)行清理函數(shù)。
這是一個(gè)例子:
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);
}
這樣,當(dāng)您的自定義元素被移除時(shí),您可以運(yùn)行任何您想要的清理,而無(wú)需創(chuàng)建多個(gè) MutationObservers。
添加回答
舉報(bào)