Short usage example from my Webcomponents Framework
Live demo: here
For this example I also use EBuilder, a custom library I recently started to develop in order to create, edit and manipulate elements the intuitive and pleasant way.
// tech-list.ts
this.props.stack.forEach((name) => EBuilder(new TechItem(name))
.setListeners(['click', swapIt])
.into(EBuilder('li').into(this.select('ul')))
)
instead of:
this.props.stack.forEach((name) => {
const li = document.createElement('li')
const techItem = new TechItem(name)
techItem.addEventListener('click', swapIt)
li.appendChild(techItem)
this.select('ul').appendChild(li)
})