Add XULElementBase class for custom elements

https://github.com/zotero/zotero/pull/2631#discussion_r906723540

chrome/content/zotero/elements/base.js

@@ -0,0 +1,43 @@
+class XULElementBase extends XULElement {
+	/**
+	 * @return {String[]} Stylesheet URIs
+	 */
+	get stylesheets() {
+		return [];
+	}
+
+	/**
+	 * @return {DocumentFragment | null}
+	 */
+	get content() {
+		return null;
+	}
+
+	init() {}
+
+	destroy() {}
+
+	connectedCallback() {
+		let shadow = this.attachShadow({ mode: 'open' });
+
+		for (let href of this.stylesheets) {
+			let link = document.createElement('link');
+			link.rel = 'stylesheet';
+			link.href = href;
+			shadow.append(link);
+		}
+
+		let content = this.content;
+		if (content) {
+			content = document.importNode(content, true);
+			shadow.append(content);
+		}
+
+		this.init();
+	}
+
+	disconnectedCallback() {
+		this.replaceChildren();
+		this.destroy();
+	}
+}