soo.js/example/fragment.js

custom-elements with renderer

import Soo from "../build/soo.esm.js"
import {FRAGMENT, HTML} from "https://unpkg.com/kelbas"

class Frag extends Soo {
    install() {
      this.info = "Hey"
    }
  
    beforeUpdate() {
        this.info = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
    }
  
    css() {
      return `:host {
                display:grid;
              }
              .button {
                  padding:5px 10px;
                  color:white;
                  background:blue;
                  text-aling:center;
                  width:60px;
                  height:20px;
                  cursor:pointer;
              }
              `;
    }

    render() {
        return FRAGMENT`<span> This is fragment element</span>
                        ${HTML`<span class="button" onclick=${this.update.bind(this)}>${this.info}</span>`}
                        `
    }
  }
  
  customElements.define("fragment-box", Frag);