selectAll Thoughts
const lookup = new WeakMap()
let id = 0;
export const els = selectAll(document.body)
export const parentOf = el => lookup.get(el)
export function selectAll(parent) {
const els = { id, el: parent, all: {} }
const allEls = [...parent.querySelectorAll('*')]
id++
for (let i in allEls) {
const el = allEls[i]
// any element can lookup `els`
lookup.set(el, els)
const tag = el.tagName.toLowerCase()
if (el.id) {
els[el.id] = el
tag === 'template' &&
(els[el.id + 'Tmpl'] = () => {
const instanceEl = el.content
.cloneNode(true)
.firstElementChild
return selectAll(
instanceEl
)
})
}
if (el.classList.length > 0) {
const name = el.classList[0]
if (!els[name]) {
els[name] = el
els.all[name] = [el]
} else {
els.all[name].push(el)
}
}
}
return els;
}
Whenever I code a vanilla gui for some personal project/experiment I write some variation of this. I did this one a few days back to see how it would work with template
tags.