Очистка слушателей событий в пользовательских элементах

Question

При регистрации слушателей событий в attachedCallbackэто моя ответственность, чтобы убедиться, что они будут удалены в detachedCallback?

Как показано в минимальном примере ниже, шаблон довольно предсказуем, поэтому мне интересно, возможно, браузер уже позаботится об этом?

<my-element>0</my-element>

class MyElement extends HTMLElement {
    createdCallback() {
        this.update = this.update.bind(this);
    }

    attachedCallback() {
        this.addEventListener("click", this.update);
    }

    detachedCallback() {
        this.removeEventListener("click", this.update);
    }

    update() {
        this.textContent = Math.random();
    }
}

document.registerElement("my-element", {
    prototype: MyElement.prototype
});

Answer 1

Вы должны удалить Event Listeners в detachedCallback() метод, когда они прикреплены к таким объектам, как window или же document, которая сохранится после жизни вашего Пользовательского Элемента.

Но если Event Listener присоединяется к самому пользовательскому элементу (или к любому элементу в его соответствующем DOM), он будет удален в тот момент, когда уничтожается его владелецский элемент. То есть в вашем примере выше вам не нужно было бы звонить removeEventListener() против this,