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)
	}// }}}
}