A pattern for using AbortController in Web Components #

When using Web Components you are meant to remove any event listeners you created when the component was connected. You can obviously keep a reference to each listener and remove it explicitly but using an AbortController is much easier as you can create one controller and pass it to all the event listeners.

 1class MyComponent extends HTMLElement {
 2
 3	constructor() {
 4		super();
 5		this.eventAbortController = new AbortController();
 6	}
 7
 8	connectedCallback() {
 9
10		function handler(event) {
11			console.log(event);
12		}
13
14		element.addEventListener('click',
15			handler,
16			{signal: this.eventAbortController.signal}
17		);
18	}
19
20	disconnectedCallback() {
21		this.eventAbortController.abort();
22	}
23}