Webcomponents framework demo

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