Custom Elements made easy with Swiss

#customElements #swiss #css

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)