website/public/assets/js/elements/CustomElement.mjs

const PUBLIC_ELEMENT_STYLESHEET_DIR = "/assets/css/elements/";

export class CustomElement extends HTMLElement {
	constructor() {
		super();
	}

	/**
	 * Return a pathname to a custom element CSS stylesheet
	 * @param {String} stylesheet 
	 * @returns {String}
	 */
	static #getElementStylesheetHref(stylesheet) {
		return `${PUBLIC_ELEMENT_STYLESHEET_DIR}${stylesheet}.css`;
	}

	/**
	 * Include a stylesheet for a custom element
	 * @param {String} stylesheet 
	 */
	importElementStylesheet(stylesheet) {
		if (document.head.querySelector(`link[href="${CustomElement.#getElementStylesheetHref(stylesheet)}"]`)) {
			return;
		}

		const element = document.createElement("link");
		element.href = CustomElement.#getElementStylesheetHref(stylesheet);
		element.rel = "stylesheet";

		document.head.appendChild(element);
	}

	connectedCallback() {
		if ("connected" in this) {
			this.connected();
		}
	}

	disconnectedCallback() {
		if ("disconnected" in this) {
			this.disconnected();
		}
	}

}