Upgraded Crumbs and Crumb to custom HTML elements.

static/js/app.mjs

@@ -1,4 +1,5 @@
 import { ROOT_NODE } from 'node_store'
+import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 import { N2Tree } from 'tree'
 import { NodeUINative, Node } from 'node'
 import { SyncProgress } from 'sync'
@@ -7,7 +8,7 @@ export class App {
 	constructor() {// {{{
 		this.currentNode = null
 		this.treeNative = new N2Tree()
-		this.crumbs = new Crumbs()
+		this.crumbs = new N2Crumbs()
 		this.crumbsElement = document.getElementById('crumbs')
 		this.nodeUI = new NodeUINative(document.getElementById('note'))
 
@@ -196,11 +197,17 @@ export class App {
 	}//}}}
 }
 
-class Crumbs {
+class N2Crumbs extends CustomHTMLElement {
+	static {// {{{
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+		`
+	}// }}}
 	constructor() {// {{{
+		super()
+		this.classList.add('crumbs')
+
 		this.crumbs = []
-		this.crumbsDiv = document.createElement('div')
-		this.crumbsDiv.classList.add('crumbs')
 
 		_mbus.subscribe('CRUMBS_SET', event => {
 			this.crumbs = event.detail.data
@@ -208,38 +215,40 @@ class Crumbs {
 	}// }}}
 	render() {// {{{
 		const crumbs = this.crumbs.map(node =>
-			(new Crumb(
+			new N2Crumb(
 				node.get('Name'),
 				node.UUID,
-			)).render()
+			)
 		)
 
-		const start = (new Crumb('Start', ROOT_NODE)).render()
+		const start = new N2Crumb('Start', ROOT_NODE)
 		crumbs.push(start)
 
-		this.crumbsDiv.replaceChildren(...crumbs.reverse())
+		this.replaceChildren(...crumbs.reverse())
-		return this.crumbsDiv
+		return this
 	}// }}}
 }
+customElements.define('n2-crumbs', N2Crumbs)
 
-class Crumb {
+class N2Crumb extends CustomHTMLElement {
+	static {// {{{
+		this.tmpl = document.createElement('template')
+		this.tmpl.innerHTML = `
+			<a data-el="link"></a>
+		`
+	}// }}}
 	constructor(label, uuid) {// {{{
+		super()
+		this.classList.add('crumb')
+
 		this.label = label
 		this.uuid = uuid
-	}// }}}
-	render() {// {{{
-		const crumb = document.createElement('div')
-		crumb.classList.add('crumb')
-
-		const link = document.createElement('a')
-		link.href = `/notes2#${this.uuid}`
-		link.innerText = this.label
-
-		crumb.appendChild(link)
-		return crumb
 
+		this.elLink.href = `/notes2#${this.uuid}`
+		this.elLink.innerText = this.label
 	}// }}}
 }
+customElements.define('n2-crumb', N2Crumb)
 
 function tmpl(html) {// {{{
 	const el = document.createElement('template')