Recently I have discovered a very nice library called Swiss
It's certainly the simplest mode to create custom elements.
In the example below I use the nifty cssinjs library Bss
In HTML page :
<s-hello name="Swiss"></s-hello>
In JS Page
b.css("body", {
background: "black"
})
b.css("s-hello", {
textAlign: "center"
})
const style = b({
color: "deeppink"
}).$hover({
cursor: "pointer",
color: "red"
})
function Hello (el) {
const name = el.getAttribute("name")
const view = `<h1 class=${style}>Hello ${name} & Bss<h1>`
return view
}
swiss.element("s-hello", Hello)
You can play with it here : SwissCustomElement