Updated the native treenode to a custom HTML element

static/js/lib/custom_html_element.mjs

@@ -0,0 +1,57 @@
+export class CustomHTMLElement extends HTMLElement {
+	constructor() {// {{{
+		super()
+
+		this.appendChild(this.constructor.tmpl.content.cloneNode(true))
+
+		this.querySelectorAll('*').forEach(el => {
+			const field = el.dataset.field
+			if (field !== undefined) {
+				const fieldName = this.toElementName('field', field)
+				this[fieldName] = el
+			}
+
+			const name = el.dataset.el
+			if (name !== undefined) {
+				const elName = this.toElementName('el', name)
+				this[elName] = el
+				el.classList.add('el-' + name)
+			}
+		})
+	}// }}}
+	toElementName(prefix, str) {// {{{
+		str = prefix + '-' + str
+		return str.replace(/-(id|[a-z])/g, match => match.toUpperCase().replace('-', ''))
+	}// }}}
+}
+
+export class StupidPreactCustomHTMLElement extends HTMLElement {
+	constructor() {// {{{
+		super()
+
+		// Stupid stuff because of Preact.
+		this.clonedNodes = this.constructor.tmpl.content.cloneNode(true)
+		this.clonedNodes.querySelectorAll('*').forEach(el => {
+			const field = el.dataset.field
+			if (field !== undefined) {
+				const fieldName = this.toElementName('field', field)
+				this[fieldName] = el
+			}
+
+			const name = el.dataset.el
+			if (name !== undefined) {
+				const elName = this.toElementName('el', name)
+				this[elName] = el
+				el.classList.add('el-' + name)
+			}
+		})
+	}// }}}
+	toElementName(prefix, str) {// {{{
+		str = prefix + '-' + str
+		return str.replace(/-(id|[a-z])/g, match => match.toUpperCase().replace('-', ''))
+	}// }}}
+	connectedCallback() {// {{{
+		// Stupid stuff because of Preact.
+		this.appendChild(this.clonedNodes)
+	}// }}}
+}